Javascript ReactJS：在childs的情况下呈现父对象

如何在子组件的情况下渲染父组件？ 如果任何孩子无效，我想禁用parent中的按钮。 但是验证在子组件内部

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {data: [
      {type: "text", value: ""},
      {type: "email", value: "not valid email"}
    ]};

  isAnyChildInvalid(){
    // How can I get information about my childs
  }

  render(){
    <div>
      this.state.data.map((item, index) => <Child key={index} data={item} />
      <button disabled={isAnyChildInvalid()} label="send">
    </div>
  }
}

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={数据：[
{类型：“文本”，值：}，
{键入：“电子邮件”，值：“无效电子邮件”}
]};
isAnyChildInvalid（）{
//我怎样才能得到关于我孩子的信息
}
render（）{
this.state.data.map（（项，索引）=>
}
}

类子级扩展React.Component{
isValid（）{
让valid=true；
开关（this.props.data.type）{
案例“文本”：
打破
案例“电子邮件”：
valid=（/\w+@\w+\.\w+/）.test（this.props.data.value）；
打破
违约：
有效=真；
}
告诉父母IAM无效（无效）；
返回有效；
}
tellParentThatIAmValidOrNot（有效）{
//如何告诉家长我是否有效？
//在对输入进行任何更改之前使用验证
}
render（）{
}

---

我不喜欢将所有验证都移动到父组件，因为子组件会再次在另一个父组件中使用。

React中的数据只朝一个方向流动，因此无法将数据从子组件传递到父组件。但您可以将一个函数从父组件传递到子组件，该函数包含一些参数，然后可以在函数调用中传递这些参数内部子组件

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {data: [
      {type: "text", value: ""},
      {type: "email", value: "not valid email"}
    ]};

  isAnyChildInvalid(){
    // How can I get information about my childs
  }

  render(){
    <div>
      this.state.data.map((item, index) => <Child key={index} data={item} />
      <button disabled={isAnyChildInvalid()} label="send">
    </div>
  }
}

我会这样做。 首先，在父组件中，我将创建一个具有“无效”参数的函数，该参数将是布尔值

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={数据：[
{类型：“文本”，值：}，
{键入：“电子邮件”，值：“无效电子邮件”}
]};
isAnyChildInvalid（无效）{
如果（无效）{
doSomething（）；
}
}
...
}

如果您将回调传递给孩子，并在孩子的状态更新（有效/无效）时通知家长，怎么样在对子项进行任何更改之前，先运行初始验证检查。我无法在render中的回调中设置状态。由于受控输入的状态通常是父项状态的一部分，因此父项可以完全访问所有输入值，因此可以轻松验证它们。因此，如果验证不应该是父项的一部分，只需将其移动到家长：谢谢，但是我能做些什么呢？this.setState不可能，因为它是在render中完成的，并且会导致错误。对，不在isValid函数中调用tellParentThatIAmValidOrNot。您可以为该输入元素的onChange创建一个处理程序。您需要在该处理程序中调用isValid，以获取有关数据有效性的信息，然后调用tellParentThatIAmValidOrNot。通过这种方式，您可以调用setState而不会出现错误，因为只有在输入文本发生更改时才会调用它。但这就是我的问题，验证检查应该在用户发生任何更改之前进行。要在用户输入之前进行验证检查，可以使用componentDidMount（）lifecycle方法。在装入组件时只调用一次。在此方法中，您也可以调用此处理程序。总之，您将有一个处理程序，在输入时附加到onChange事件，并且在componentDidMount（）上调用一次方法。数据也可以通过axios请求进行更改。我知道，这不在我的示例中，因此对此表示抱歉。因此，我只能使用componentDidUpdate或shouldComponentUpdate，这两种方法都不适用于setState。也许我必须为子级创建一个包含所有计算的静态方法，并在父级中使用它们。但是这样做的好处是，代码必须运行两次。一次在子级的render中获取类名，一次在父级的render中禁用按钮。除非您有另一个好主意。