ReactJS

Question

如果 this.state.editMode 为假，则输入不显示，在这种情况下，this.textInput 的 ref 设置在输入显示之前未定义。但是，如果我想单击 span 以显示输入，我需要专注于输入。

有没有人对此有一个优雅的解决方案，还是我想多了？提前谢谢你。

focusOnTextInput() {
    this.textInput.focus();
}

setEditMode() {
   this.editMode = !this.editMode;

   this.setState(() => ({
      editMode: this.editMode
   }));

   if (this.editMode) {
      this.focusOnTextInput();
   }
}


render() {
    return (
      <li className="task">
        {
          this.state.editMode ?
          <input
            type="text"
            ref={(input) => { this.textInput = input; }}
            onKeyUp={this.keyUpCheck}
            onChange={this.changeValue}
            value={this.state.newTitle} /> :
          <span onClick={this.setEditMode}>{ this.state.title }</span>
        }
        <span>{ this.props.done }</span>
        <span>{ this.props.inProgress }</span>
        <button onClick={this.props.onRemove}>X</button>
      </li>
    )
  }

好吧，我添加了关于 editMode 的更改，它工作得很好，而且焦点现在可以工作，因为 ref 意味着什么......非常好，谢谢 Tony :-)

setEditMode() {
  this.setState(() => ({
    editMode: !this.state.editMode
  }));
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.editMode) {
    this.focusOnTextInput();
  }
}

现在如何设置为完整并给你满分..？

Answer 1

如果您使用 componentDidUpdate(prevProps, prevState)，您将能够检查 this.state.editMode 是否已设置并调用您的 this.focusOnTextInput()

ReactJS - 使用 ref 切换显示元素的优雅解决方案

ReactJS - Elegant solution to toggle show element with ref

ref

toggle

ecmascript-6