自动对焦react JS 中的输入元素

IT技术 javascript reactjs
2021-05-12 03:33:49

我无法自动聚焦此组件中呈现的输入标签。我在这里错过了什么?

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

任何帮助表示赞赏。

2个回答

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

autoFocus与输入元素一起使用

<input autoFocus />

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

componentDidMount(){
    this.focus();
}

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

componentWillUpdate只要shouldComponentUpdate返回 true就会被调用

componentDidMount:一旦执行了渲染方法,就会调用 componentDidMount 函数。可以在此方法中访问 DOM,从而可以定义 DOM 操作或数据获取操作。任何 DOM 交互都应该在这里发生。

参考:https : //facebook.github.io/react/docs/react-component.html

为输入设置一个 ID,然后.setAttribute('autoFocus', true)在需要聚焦时将其用于元素