如何以编程方式将焦点设置在 React 中不同组件中的元素上？

【问题标题】：How do I programmatically set focus on an element in a different component in React?如何以编程方式将焦点设置在 React 中不同组件中的元素上？
【发布时间】：2018-11-28 23:12:19
【问题描述】：

我有一个父组件和两个子组件，分别称为child A和child B。我想单击 child A 中的一个按钮，该按钮将焦点设置在 child B 中的一个元素上。更具体地说，我想将焦点设置在 child B 中 <main> 标记下的第一个元素上。

我该怎么做？我是否必须在 parent 中使用React.createRef()，然后将该引用传递给两个 children，还是有更直接的方法可以做到这一点？

【问题讨论】：

我的回答对你有用吗？如果您觉得有，请考虑 accepting it。

标签： reactjs focus accessibility

【解决方案1】：

像您提到的那样在父组件中创建一个 ref 并将其传递给 child B，并创建一个将聚焦 ref 并将其传递给 child A 的函数是一种接近它的方法。

示例

class App extends React.Component {
  ref = React.createRef();

  handleClick = () => {
    this.ref.current.focus();
  };

  render() {
    return (
      <div>
        <ChildA onClick={this.handleClick} />
        <ChildB innerRef={this.ref} />
      </div>
    );
  }
}

function ChildA(props) {
  return <button onClick={props.onClick}>Focus</button>;
}

function ChildB(props) {
  return <input ref={props.innerRef} />;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：