reactjs - 单击按钮后聚焦输入

Question

我目前正在尝试通过制作一个 Todo 列表来学习 React（我知道是原始的）。我还没有学到很多概念（我仍在使用类组件），但我想知道是否有推荐的方法来集中按下编辑按钮时出现的输入？

我尝试使用 createRef 但它似乎仍然不起作用。我想知道我的输入应该是一个单独的组件，专注于安装？

任何方向将不胜感激：

export class Item extends Component {
constructor(props){
    super(props)
    this.editInput = React.createRef()
    this.state = {
        editView: false
    }
    this.handleRemove = this.handleRemove.bind(this);
    this.toggleView = this.toggleView.bind(this);
    this.editMode = this.editMode.bind(this);
}
handleRemove(e){
    this.props.remove(this.props.detail);
}

toggleView(){
    this.setState(prevState => (
        {editView: !prevState.editView }
        ))
}

editMode(){
    this.toggleView();
    
    this.editInput.current.focus();
}

render() {

    const itemView = !this.state.editView ?<div className="item">{this.props.detail}</div> : <input ref={this.editInput} className="edit-item-input" placeholder={this.props.detail + "..."}></input> ;
    return (
        <div className="item-container">
            {itemView}
            <div className="buttons">
                <button onClick={this.editMode} className="button button-edit">Edit</button>
                <button onClick={this.handleRemove} className="button button-delete">Delete</button>
            </div>
        </div>
    )
}

}

标签： reactjs

Answer 1

您可以在元素上添加 ReactautoFocus属性，input它应该可以按您的意愿工作。