Question

我用render（）方法制作了自己的表单组件，如下所示：

 render() {
    return (
        <form onSubmit={this.onSubmit} ref={(c)=>this._form=c}>
            {this.props.children}
        </form>
    )
}

请注意，子项在此处呈现为{this.props.children}，因此用户可以像这样使用此组件：

 <Form onSubmit={this.submit}   >
            <Input  name={"name"} id="name"  labelName="Ime" placeholder="Unesite ime" type="text" >
                 <Validation rule="required" message="Ovo je obavezno polje"/>
            </Input>
            <Input  name={"email"} id="email"  labelName="Email" placeholder="Unesite email adresu" type="text" >
                <Validation rule="required" message="Ovo je obavezno polje"/>
                <Validation rule="email" message="Ovo je nije valjana email adresa"/>
            </Input>
            <button type="submit" value="Pošalji" >Pošalji</button>
       </Form>

我想在Input内检查每个onSubmitMethod()组件的状态（以获得其有效性）。

  checkValidity() {
    var sefl = this;
    this.props.children.map((child) => {
        if (child.type.name === "Input") {

//How to get state of child here
        }
    });
}
onSubmit(event) {
    event.preventDefault();
    var obj = serialize(this._form, { hash: true });
    const validityOfForm = true; //hardcoded for now
    this.checkValidity();
    this.props.onSubmit(obj, validityOfForm);

}

Answer 1

我在项目中做了类似的事情，通过将父状态作为子项传递给子，以访问表单元素的父组件中的子组件数据。

在您的情况下，如果您将子组件中的组件状态作为道具发送，并且每个子组件都使用父级状态，例如this.props.state.variablename而不是this.state.variablename。您将控制子组件＆＃39;州/数据。

使用this.prop.children作为道具，从表单组件向子元素发送状态不是直截了当的。以下链接有助于实现此目的。

https://stackoverflow.com/a/32371612/1708333

示例：

父组件：

<FormFields state={this.state} _onChange={this._onChange} />

子组件

<Input name="fieldname" value={this.props.state.fieldname} type="text" label="Lable text" validationMessage={this.props.state.validationMessages.fieldname} onChange={this.props._onChange} />

如果您需要更多信息，请与我们联系。

Answer 2

将ref（例如myinput）添加到孩子，并通过this.refs.myinput.state获取其状态，以便在必要时访问孩子的状态。

但是，在放置ref之前，请先查看此thread。有一个更好的模式。

Answer 3

输入应该已定义参考。这很容易。但是因为输入是在Form的父组件中定义的（在Form组件中呈现的是alt（因为{this.props.children}）我应该使用Form访问child_owner._instance 组件的父级。现在代码的相关部分是：

   checkValidity() {
    var sefl = this;
    var errorsCount = 0;
    this.props.children.map((child) => {

        if (child.type.name === "Input") {
            var refs = child._owner._instance.refs;
            var rules = refs[child.ref].state.validationRules;
            var hiddenRules = refs[child.ref].state.validationRulesHidden;
            if (_.filter(_.values(rules), (elem) => elem == true).length > 0 || _.filter(_.values(hiddenRules), (elem) => elem == true).length>0) {
                errorsCount++;
            }
      }

    });
    if (errorsCount == 0) {
        return true;
    }
    return false;
}

如何在反应中访问子状态？

3 个答案: