description在TaskCard组件enter上按下键后，如何将焦点更改为组件中的字段InputField？
那是父组件
export default class Task extends Component {
constructor(props) {
super(props)
this.state = { cardID: '', list: [] }
this.handleAdd = this.handleAdd.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleEdit = this.handleEdit.bind(this)
this.handleRemove = this.handleRemove.bind(this)
this.refresh()
}
handleAdd = (event, cardID) => {
...
}
handleChange(e) {
...
}
handleEdit = (e, task) => {
task.description = e.target.value
axios.put(`${URL}/${task._id}`, task)
.then(resp => this.refresh(this.state.description))
}
refresh() {
...
}
handleRemove = task => {
...
}
render() {
return (
<Fragment>
<Row className="card-columns">
<taskCard title="Task Board" cardID='1' color='blue-violet'
handleAdd={this.handleAdd}
handleChange={this.handleChange}
handleEdit={this.handleEdit}
description={this.state.description}
list={this.state.list}
handleRemove={this.handleRemove}
/>
</Fragment >
)
}
}
该TaskCard组件包含description input field. 这是需要获得焦点的领域：
const TaskCard = props => {
const renderRows = () => {
const list = props.list || []
return list.map(task => (
task.cardID === props.cardID &&
<InputField task={task}
handleChange={props.handleChange}
handleEdit={props.handleEdit}
handleRemove={props.handleRemove}
/>
))
}
return (
<Fragment>
{renderRows()}
<Form>
{/* input who needs to receive focus */}
<Form.Control className='input-field description' name='description' type="text" placeholder="Insert a task"
onChange={props.handleChange}
onKeyPress={event => {
if (event.key === 'Enter') {
props.handleAdd(event, props.cardID)
event.target.value= ''
event.preventDefault()
}
}}
/>
</Form>
</Fragment >
)
}
export default TaskCard
Input field组件是用户编辑任务并按 的地方Enter。当Enter按下时，任务被修改，我想集中description field在TaskCard组件
const InputField = props => {
return (
<Fragment>
<Row>
<Col xs={12} style={{paddingRight: 0}}>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Control className='inputs-field' type="text" name={props.task._id}
placeholder={props.task.description}
onChange={props.handleChange}
onKeyPress={event => {
if (event.key === 'Enter') {
props.handleEdit(event, props.task)
event.preventDefault()
}
}}
/>
</Form.Group>
</Form>
</Col>
</Row>
</Fragment >
)
}
export default InputField
使用 refs 获取对 TaskCard 中输入的引用并将其传递给您要关注的输入：
const TaskCard = props => {
// useRef here
const inputRef = useRef(null)
const renderRows = () => {
const list = props.list || []
return list.map(task => (
task.cardID === props.cardID &&
<InputField task={task}
handleChange={props.handleChange}
handleEdit={props.handleEdit}
handleRemove={props.handleRemove}
/>
))
}
return (
<Fragment>
{renderRows()}
<Form>
{/* input who needs to receive focus */}
...
// pass ref here
ref={inputRef}
}}
/>
</Form>
</Fragment >
)
}
export default TaskCard
然后在<InputField />组件中传递引用：
<InputField task={task}
handleChange={props.handleChange}
handleEdit={props.handleEdit}
handleRemove={props.handleRemove}
// pass the ref down
inputRef={inputRef}
/>
然后从 <InputField />组件中调用它，就像这样调用 handleEdit 函数：
() => {
props.handleEdit()
props.inputRef.current.focus()
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句