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

Question

我有以下表单，其中包含一个 Field 和一个 FieldArray。在 FieldArray 中，我有一个 select 字段，有两个选项：Demo 和 Final。当 Demo 为 selected 时，我想隐藏 Maintenance Period 和 Maintenance Type 字段，当 Final 为 selected 时，应显示 Demo Duration 字段，应隐藏前 2 个。代码如下：

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 和 hide/show 其他字段上有一个 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 提供的选择器来准确提取您想要的表单值并将其作为道具注入。

那个 prop 可以传递给你想要的组件 show/hide。

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

How can I show or hide Fields in redux-form based on some condition triggered by an event

conditional

rendering

reactjs

redux

redux-form