reactjs - 从父组件中的子组件访问节点元素

Question

我有一个渲染子组件的父组件。My Child 组件通过“children”属性渲染另外两个组件。

所以，它看起来像：

class ParentComponent extends Component {
  input = React.createRef();
  render() {
   return (
     <Form setRef={this.input}>
       <Label />
       <Input />
     </Form>
   )
  }
}

class Form extends Component {
  render() {
   const { setRef } = this.props;
   const children = React.Children.map(this.props.children, (child) => {
    return React.cloneElement(child, {
    setRef,
 });
});
   return (
      <>
       <form>
         {children}
       </form>
      </>
    )
  }
}

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

class Label extends Component {
  render() {
   return <label>Title</label>
  }
}

正如我在一篇文章中所读到的，我应该使用“React.cloneElement 顶级 API”来将道具从父组件传递给子组件，而无需在子组件中显式设置属性。

主要目标是将输入集中在我的 ParentComponent 中的单击事件和控制输入节点上。

问题是：如何访问父组件中的输入节点？目前，我尝试像上面的代码那样做，但如果我在 ParentComponent 中控制台 this.input.current，它会给我 null。

标签： reactjs