如何使用Redux-Form

时间:2019-03-21 18:24:18

标签: reactjs redux redux-form react-redux-form

我现在有一个非常复杂的表格,并且我试图根据下拉选择显示不同的字段。我正在使用<FieldArrays>,所以我的问题是,有条件渲染的字段都具有相同的值。这是我尝试做的,但是根本行不通:

字段数组组件

const renderOfferInputParent = ({ fields, hasEmailValue, meta: { touched, error, submitFailed } }) => (
        <div>
          <br/>
            <div className="row">
            <div className="col-lg-10">
              </div>
              <div className="col-lg-2">
              <Button color="success" className="float-right" onClick={() => fields.push({})}>Add Input Group</Button>
              {(touched || submitFailed) && error && <span>{error}</span>}
              </div>
              </div>
            {fields.map((questionAnswers,  index) => (
              <div>
                <br/>
              <div className="row">
              <div key={index} className="col-lg-12">
              <h4>Input #{index + 1}</h4>
             </div>
          </div>
          <Row>
            <Col lg={1}>
            <Button color="danger"
                  className="removeofferInputParent"
                  type="button"
                  title="Remove Parent Attribute"
                  onClick={() => fields.remove(index)}><i className="fa fa-close"></i></Button>
            </Col>
                      <Col lg={3}>
                        <Field name={`${questionAnswers}.text`}
                          type="text"
                          component={renderField}
                          label="Answer"
                        />
                      </Col>
                      <Col lg={3}>
                      <Field type="select"
                    name={`${questionAnswers}.question_actions`}
                    component={renderOfferActionDropdown}
                    value={this.state.questionAction}
                    onChange={this.handleChangeForActions}
                    label="Action"
                    />
                    </Col>
                    <Col lg={3}>
                    <Field type="select"
                    name={`${questionAnswers}.actions`}
                    component={renderActionDropdown}
                    value={this.state.questionAction}
                    onChange={this.handleChangeForActions}
                    label="Offer Action"
                    />
                    </Col>

                    </Row>
                    <Row>
                      <Col lg="12">
                      <FieldArray name="additionalAction" component={renderAdditionalAction}/>

                      </Col>
                    </Row>
                    <br/>
                    <Row>
                  <Col lg="12">
                    {
                      this.state.questionAction === 'offer_action_hardcoded' ?
                        <div>
                          <Row>
                            <Col lg="4">
                            <Label>Advertiser</Label>
                            <Field name="advertisers"
                              component={renderUserAttributeList}
                              type="select"
                            />
                            </Col>
                            <Col lg="4">
                            <br/>
                            <label htmlFor="linkoutHasRevenue">Linkout has revenue</label>&nbsp;&nbsp;&nbsp;
                            <Field name={`${offerInputParent}.linkoutHasRevenue`} id="linkoutHasRevenue" component="input" type="checkbox"/>
                            </Col>
                          </Row>

                        </div>
                      : this.state.questionAction === 'offer_action_linkout' ?
                      <Row>
                            <Col lg={3}>
                            <Field name="criteriaUserAttributesAndOr"
                            component={renderUserAttributeAndOr}
                            type="select"/>
                            </Col>
                            <Col lg={8}>

                            </Col>
                          </Row>
                           : null
                    }
                    </Col>
                    </Row>
                    <Row>
                      <Col lg="4">
                      </Col>
                      <Col lg="4">
                        <Field name={`${questionAnswers}.url`}
                          component={renderField}
                          type="text"
                          label="URL"
                        />
                      </Col>
                      <Col lg="2">
                        <Label>Show HTTP settings</Label>
                      </Col>
                    </Row>
                    <hr/>
                    </div>
            ))}
        </div>
        );

   constructor(props) {
      super(props)
      this.state = {
        userAttribute: 'select',
        questionAction: [],
        questionActionChildren: 'select',
       }
      this.handleChangeForUserAttribute = this.handleChangeForUserAttribute.bind(this);
      this.handleChangeForActions = this.handleChangeForActions.bind(this);
    }

字段数组调用

 <FieldArray name="questionAnswers" component={renderOfferInputParent} />

我将包含我所解释的图像。 enter image description here

广告客户和链接输出的收入始终彼此具有相同的值,但是我试图使它们独立。另外,无论何时从“操作”下拉菜单中进行选择,这两个输入组都将更改,但仅应更改其中一个。 感谢您提前提供帮助

0 个答案:

没有答案