如何以编程方式对输入进行聚焦

Question

我试图实现一个非常简单的用例，一个UI特性，其中：

null

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.word}</h3>
    </div>

this.refs.updateTheWord.focus();

这些建议和类似的建议都不起作用。我也试着愚弄一下反应，看看我能不能做点什么！我使用了真实的DOM：

    const x = document.getElementById(this.props.word._id);
    x.focus();

而且也没用。我甚至无法理解的一件事是这样的建议：将ref作为一个方法（我“猜测”），我甚至没有尝试它，因为我有很多这样的组件，我需要ref来进一步获得每个组件的值，我无法想象如果我的ref没有命名，我如何获得的值！

所以你能给出一个想法，帮助我理解，如果我不使用一个表单（因为我需要一个单一的输入框代替一个标签），我如何设置它的焦点，当它的CSS（Bootstrap）类失去‘隐藏’请？

Answer 1

你使用refs的方式不是最喜欢的方式，或者它不再是最佳实践。试试这样的东西

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

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

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

更新
从React 16.3开始，您可以使用React.createRef()API

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}