reactjs - react 组件渲染时如何将焦点设置在按钮上？

Question

我想在 React 组件加载后立即将焦点设置在按钮上，以便用户只需使用键盘按下按钮即可。

这就是我想做的，但这似乎行不通。

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

  }

  componentDidUpdate(){
     this.logButton.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <Button ref={this.logButton}  outline color="primary" size="sm" onClick={this.logManualRequestModal}>
         Log request
        </Button>
      </div>
    );
  }
}

我正在使用 tabler-react组件

Answer 1

将 componentDidUpdate() 更改为 componentDidMount()，如下所示:

componentDidMount(){
     this.logButton.current.focus();
  }

和您使用的 Button 组件来自 tabler-react和定义为 rootRef 的 Button 组件 ref 在 Button 组件中检查它们的 ref Prop 。

所以像这样更改 ref :

<Button rootRef={this.logButton} color="primary">A Button</Button>

demo和 ref