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

Question

我有以下表单，其中包含一个 Field 和一个 FieldArray。在 FieldArray 中，我有一个选择字段，有两个选项:演示和最终。当选择演示时，我想隐藏维护周期和维护类型字段，当选择最终时，应显示演示持续时间字段，前两个字段应隐藏。代码如下:

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字段:这是您传递的 Prop 之一 {...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 。在这个从状态到 Prop 的特定映射中，您可以使用 redux-form 提供的选择器准确提取您想要的表单值并将其作为 Prop 注入(inject)。

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