ReactJS：访问子方法

Question

我正在尝试为我正在进行的项目制作一个简单的表单系统，这个想法很简单。我有一个FormStore 可以注册表单，可以将组件注册到这些表单并且可以检索所有数据。

我想让它尽可能自动化，所以当<Form> 元素被挂载时，它应该搜索任何子元素以查找isFormItem 属性，并使用一些回调自动注册该输入字段以获取定义的值在输入元素内。

我面临的问题是我不知道如何从更高级别的组件访问子组件。我认为没有办法使用 refs，因为它们必须手动分配，而这正是我要避免的。

这是来自我的 Form.react.jsx 的相关 sn-p。这是我尝试将每个输入字段附加到表单的地方。

  componentDidMount() {
    const name = this.props.name ||
      'form_' + Math.floor(Math.random() * 100000000);
    FormStore.registerForm(name);
    React.Children.forEach(this.props.children, (child) => {
      if (selectn('props.isFormItem', child)) {
        // I need to call child.attachToForm somehow...
      }
    });
  };

这些是 Input.react.jsx 的相关部分。

  constructor(props) {
    this.attachToForm = this.attachToForm.bind(this);
  }

  attachToForm(formName) {
    const name = this.props.name ||
      'formItem_' + Math.floor(Math.random() * 100000000);
    FormStore.attachToForm(formName, name, () => this.state.value);
  }

我尝试过像这样访问子组件方法：

  React.Children.forEach(this.props.children, (child) => {
    if (selectn('props.isFormItem', child)) {
      child.type.prototype.attachToForm =
        child.type.prototype.attachToForm.bind(child);
      child.type.prototype.attachToForm(name);
    }
  });

但是调用原型并没有在任何地方绑定实际的对象实例，因此最终导致到处都有一大堆绑定，最后除了非常混乱之外，它根本没有工作。

有没有办法做到这一点？我只是没有看到它...任何帮助将不胜感激。

Answer 1

您可以将formName 作为prop 传递给每个Input 组件，然后将每个项目附加到它自己的componentDidMount 方法中。

此外，getDefaultProps 方法在您的情况下似乎很方便。

类似：

getDefaultProps() {
  return {
    name: 'form_' + Math.floor(Math.random() * 100000000)
  }
}
render() {
   return <Input formName={this.props.name} />
}

然后在 Input 组件中：

getDefaultProps() {
  return {
    name: 'formItem_' + Math.floor(Math.random() * 100000000)
  }
}
componentDidMount() {
  FormStore.attachToForm(this.props.formName, this.props.name, () => this.state.value)
}