ReactJS - 使用ref

Question

如果this.state.editMode为false，则输入不显示，在这种情况下，this.textInput的ref设置是未定义的，直到输入显示。但是，如果我想点击跨度来显示输入，我需要关注输入。

有人为此提供了优雅的解决方案，还是我在思考？提前谢谢。

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()