Question

我有以下表单，其中包含Field和FieldArray。在FieldArray中我有一个选择字段，有两个选项：Demo和Final。选择演示时，我想隐藏维护期和维护类型字段，选择最终时，应显示演示持续时间字段，应隐藏前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提供的选择器精确提取所需的表单值并将其作为道具注入。

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

如何根据事件触发的某些条件显示或隐藏redux-form中的字段

1 个答案: