将焦点设置在有状态组件中的特定按钮上的反应方式？

Question

我尝试了不同的方法来将焦点设置到页面加载上的按钮，例如 ref ，但它不起作用。那就是每当页面加载焦点应该在此按钮上时。谁能帮我举个例子

class SubPageHeader extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {

  }
  render() {
   return (
    <input type="button"/>
   );
  };
}

谁能帮我解决一下？

Answer 1

使用参考：

class Component extends React.Component{
    input = React.createRef()

    componentDidMount(){
        this.input.current.focus()
    }

    render(){ return <input ref={this.input} /> }
}

或plain HTML：<input autoFocus />

Answer 2

componentDidMount 只会在您的页面第一次加载时执行一次，要保持对每次重新呈现的关注，您还需要使用 componentDidUpdate.

class SubPageHeader extends React.Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();
  }

  componentDidMount() {
     this.myInput.current.focus(); //To focus first time page loads
  }

  componentDidUpdate(){
     this.myInput.current.focus(); //To focus on every re-render
  }

  render() {
    return (
      <input type="button" ref={this.myInput} />
    );
  };
}

Answer 3

关注组件挂载最简单的方法是

class SubPageHeader extends React.Component {

  render() {
   return (
    <input autoFocus type="button"/>
   );
  };
}

将焦点设置在有状态组件中的特定按钮上的反应方式？

react way of setting focus on a particular button in stateful component?

focus

pageload

reactjs