javascript - 自动对焦 React JS 中的输入元素

Question

我无法自动聚焦在此组件中呈现的输入标签。我在这里缺少什么？

class TaskBox extends Component {
  constructor() {
    super();
    this.focus = this.focus.bind(this);
  }

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

  componentWillUpdate(){
    this.focus();
  }

  render() {
    let props = this.props;
    return (
      <div style={{display: props.visible ? 'block' : 'none'}}>
        <input
        ref={(input) => { this.textInput = input; }}
        onBlur={props.blurFN} />
        <div>
          <div>Imp.</div>
          <div>Urg.</div>
          <div>Role</div>
        </div>
        <div>
          <button>Add goal</button>
        </div>
      </div>
    )
  }
}

感谢任何帮助。

Answer 1

有一个属性可用于自动对焦autoFocus ，我们可以使用它来自动对焦输入元素而不是使用 ref .

使用 autoFocus输入元素:

<input autoFocus />

我们也可以使用ref , 但是对于 ref 我们需要在正确的地方调用 focus 方法，你在 componentWillUpdate 中调用它生命周期方法，该方法不会在初始渲染期间触发，而是使用 componentDidMount生命周期方法:

componentDidMount(){
    this.focus();
}

shouldComponentUpdate :总是在 render 方法之前调用，并允许定义是否需要重新渲染或可以跳过。显然，在初始渲染时永远不会调用此方法。仅当组件中发生某些状态更改时才会调用它。

componentWillUpdate 一旦 shouldComponentUpdate 被调用返回真。

componentDidMount :一旦执行了 render 方法，就会调用 componentDidMount 函数。可以在此方法中访问 DOM，从而能够定义 DOM 操作或数据获取操作。任何 DOM 交互都应始终在此发生。

引用:https://facebook.github.io/react/docs/react-component.html