Question

我目前正在尝试关注位于另一个子组件内的子组件中的输入字段。请考虑以下内容，

Parent.js

child1.js

child2.js

当我从parent.js点击一个按钮时，我想将输入字段集中在child2中。

Answer 1

我不是说使用这种技术很好但是你可以通过创建一个让孩子1传给孩子的setRef函数来实现这一点。确保阅读{{3}为什么refs不是最好的东西。对我来说，我会使用道具回调。

但如果你真的想使用ref，那么你就是这样做的。我把代码示例放在这里。您也可以在此处使用代码https://reactjs.org/docs/refs-and-the-dom.html

class Child2 extends React.Component {
  render() {
    return (
      <div>
        <input ref={this.props.setRef} />
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    return (
      <div>
        <Child2 setRef={this.props.setRef} />
      </div>
    );
  }
}

class Parent extends React.Component {
  setRef = ref => {
    this.input = ref;
  };

  focus = () => {
    this.input.focus();
  };

  render() {
    return (
      <div>
        <Child1 setRef={this.setRef} />
        <button onClick={this.focus}>Go Focus</button>
      </div>
    );
  }
}

Answer 2

只需在React方法中使用普通的vanilla JavaScript。

handleFocus () {
  document.getElementById('inputField').focus()
}

<button onClick={this.handleFocus}>My Button</Button>

单击按钮后，这将聚焦输入。

Reactjs聚焦位于另一个子组件内的子组件中的输入字段

2 个答案: