我现在有一个非常复杂的表格,并且我试图根据下拉选择显示不同的字段。我正在使用<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>
<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} />
广告客户和链接输出的收入始终彼此具有相同的值,但是我试图使它们独立。另外,无论何时从“操作”下拉菜单中进行选择,这两个输入组都将更改,但仅应更改其中一个。 感谢您提前提供帮助