我有一个场景,每个项目将有两个字段。一个字段是一个复选框,另一个字段是下拉列表,但重点是从中获取一对数据,我根据项目映射它(它们也有类别)。下拉列表取决于复选框(未选中时,下拉列表被禁用,值被重置为无或零)
我试过
<Field name={ `${item.label}` } component={MyCheckBoxComponent}>
<Field name={ `${item.value}` } component={MyDropDownComponent}>
发生的事情是每个人都有唯一的name
,当我需要根据复选框选择更新值时,我无法做任何事情。
我已经尝试将两个输入放在一个Field
中,但我无法让它工作。非常感谢帮助
答案 0 :(得分:2)
您需要使用Redux字段(https://redux-form.com/6.0.4/docs/api/fields.md/)而不是Redux字段 您可以创建一个单独的组件来包装复选框组件和下拉组件。
这就是你使用它的方式
<Fields
names={[
checkboxFieldName,
dropDownFieldName
]}
component={MyMultiFieldComponent}
anotherCustomProp="Some other information"
/>
您在 MyMultiFieldComponent
中获得的道具{
checkboxFieldName: { input: { ... }, meta: { ... } },
dropDownFieldName: { input: { ... }, meta: { ... } },
anotherCustomProp: 'Some other information'
}
input属性有一个onChange属性(这是一个方法),你可以调用它来更新相应的字段值。
例如在onChange方法的复选框
onChangeCheckbox (event) {
const checked = event.target.checked;
if (checked) {
// write your code when checkbox is selected
} else {
const { checkboxFieldName, dropDownFieldName } = props;
checkboxFieldName.input.onChange('Set it to something');
dropDownFieldName.input.onChange('set to zero or none');
}
}
这样您就可以同时更新多个字段值。
希望这有帮助。
答案 1 :(得分:0)
可能这就是你要找的东西 - formValues
装饰者。
只需使用此装饰器包装您的下拉列表,然后将名称传递给您的复选框,以便您可以访问MyDropDownComponent
。
例如:
import { formValues } from 'redux-form';
<form ...>
<Field name="myCheckBox" component={MyCheckBoxComponent}>
<Field name="myDropdown" component={formValues('myCheckBox')(MyDropDownComponent)} />
</form>
那么myCheckBox
值将作为道具传递。
表现说明:
每次选定的值之一发生更改时,此装饰器会使组件呈现()。
谨慎使用。
在此处查看更多内容 - https://redux-form.com/7.3.0/docs/api/formvalues.md/