如何根据事件触发的某些条件以redux形式显示或隐藏字段

Question

我有以下形式，其中包含一个Field和一个FieldArray。在FieldArray中，我有一个选择字段，其中有两个选项：Demo和Final。选择“演示”时，我想隐藏“维护期限”和“维护类型”字段，当选择“最终”时，应显示“演示持续时间”字段，而前两个则应隐藏。代码如下：

const renderLicenses = ({ fields }) => (
    <ul className="list-unstyled">
        <li>
            <button type="button" className="btn btn-info" onClick={() => fields.push({})}>Add License</button>
        </li>
        {fields.map((license, index) =>
            <li key={index}>
                <button
                    type="button"
                    title="Remove license"
                    onClick={() => fields.remove(index)}/>
                <h4>License #{index + 1}</h4>
                <Field
                    name={`${license}.licenseName`}
                    type="text"
                    component={renderSelectLicenses}
                    collectionOfOptions={LICENSES}
                    label="Please select license name">
                </Field>
                <Field
                    name={`${license}.licenseType`}
                    type="text"
                    component={renderSelectLicenseType}
                    label="Please select license type"/>
                <Field
                    name={`${license}.validFrom`}
                    type="text"
                    component={renderCalendar}
                    label="Valid from"/>
                <Field
                    name={`${license}.validTo`}
                    type="text"
                    component={renderCalendar}
                    label="Valid to"/>
                <Field
                    name={`${license}.demoDuration`}
                    type="text"
                    component={renderField}
                    label="Demo duration"/>
                <Field
                    name={`${license}.maintenancePeriod`}
                    type="text"
                    component={renderField}
                    label="Maintenance period"/>
                <Field
                    name={`${license}.maintenanceType`}
                    type="text"
                    component={renderSelectMaintenanceTypes}
                    collectionOfOptions={MAINTENANCE_OPTIONS}
                    label="Maintenance type"/>
            </li>
        )}
    </ul>
);

这是renderSelectLicenseType代码：

    import React from 'react';
    const renderSelectLicenseType = ({input, label}) => (
    <div className="form-group">
        <label>{label}</label>
        <select className="form-control" {...input}>
            <option disabled>Please select a license type</option>
            <option value="demo">Demo</option>
            <option value="final">Final</option>
        </select>
    </div>
    );

export default renderSelectLicenseType;

基本上，如果event.target.value是'demo'或'final'，我想在onChange事件上选择并隐藏/显示其他字段。我不知道如何将此事件传播到自包含的其他字段：

const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="form-group">
    <label>{label}</label>
    <div>
        <input className="form-control" {...input} type={type} placeholder=  {label}/>
        {touched && error && <span>{error}</span>}
    </div>
</div>

）;

最后，这是包含整个表单的主组件的代码：

render() {
        const {handleSubmit, invalid, submitting} = this.props;
        return (
            <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} style={tempStyles}>
                <Field name="machineID" type="text" component={renderField} label="Machine ID"/>
                <FieldArray name="licenses" component={renderLicenses} />
                <div className="form-group">
                    <RaisedButton type="submit" label="Add new machine" primary={true} disabled={invalid || submitting}/>
                </div>
            </form>
        )
    }

export default reduxForm({
    form: 'addMachine',
    validate: validate
})(AddMachineMaster);

我是redux-form的新手，很难解决这个问题。谢谢！

Answer 1

Redux-form已经将onChange道具附加到您的select领域：这是您在{...input}此处传递的道具之一：

<select className="form-control" {...input}>
   <option disabled>Please select a license type</option>
   <option value="demo">Demo</option>
   <option value="final">Final</option>
</select>

这意味着您的价值已经在Redux存储中。但是，您需要使用来提取它connect，因为新版本的redux-form不会将表单与每个值连接在一起以提高性能。

文档中有一个示例可以完全满足您的要求。在这种情况下，当选中“电子邮件”字段时，将显示输入电子邮件地址的输入，否则隐藏。

http://redux-form.com/6.5.0/examples/selectingFormValues/

其要点是装饰您的表格两次，一次用reduxForm另一本手册connect。在这种从状态到道具的特定映射中，您可以使用提供的选择器redux-form来准确提取所需的表单值并将其作为道具注入。

该道具可以传递到要显示/隐藏的组件上。