Question

所需的是创建一个可重用的表单处理程序，以处理作为子级传递给它的组件上的输入验证。

//这是我的父类呈现表单（窗体）是我希望进行验证的地方

  <View style={{ flex: 1, padding: 16 }}>
    <Form>
      <MaterialInput placeholder="Email" value="Hamma" type="email" 
       />
      <MaterialInput placeholder="First name" type="text" />
      <MaterialInput placeholder="Last name" type="text" />
      <MaterialInput placeholder="Password" type="password" />
    </Form>
    {this.renderActionButton}
  </View>

//（Form）类看起来像这样。我的问题是我想在（Form）中给孩子分配一个ref而不是在父级中，因为父级在那里不会对ref做任何事情，所以我想避免在父级中不需要的代码，这样可以保持其整洁，其原因我需要对child的引用是因为有了ref，我可以将注意力集中在孩子上并设置错误并访问其中的值。

render() {
    const wrappedChildrens = [];

    React.Children.map(this.props.children, (Child, index) => {
      if (!Child) {
        return;
      }

      wrappedChildrens.push(
        React.cloneElement(Child, {
          key: `child.type_${index}`
        })
      );
    });

    return wrappedChildrens;
  }

如果孩子没有附加裁判，是否可以对收到this.props.children的孩子附加裁判？

0 个答案: