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

Question

我有以下表格，其中包含一个字段和一个 FieldArray。在 FieldArray 内，我有一个选择字段，有两个选项：Demo 和 Final。 When Demo is selected, I would like to hide the Maintenance Period and Maintenance Type Fields and when Final is selected, the Demo Duration field should be shown, the previous 2 should be hidden.代码如下：

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”，我希望在 select 上有一个 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。在这个从 state 到 props 的特定映射中，您可以使用 redux-form 提供的选择器准确提取您想要的表单值并将其作为 props 注入。

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