如何在一个Redux形式的Field组件中关联多个组件？

Question

我有一个方案，其中每个项目都有两个字段。 一个字段是一个复选框，另一个字段是下拉列表，但重点是要从中获取一对数据，我根据项目（也有类别）对此进行映射。 下拉列表取决于复选框（当未选中时，下拉列表被禁用并且值重置为无或零）

我试过了

<Field name={ `${item.label}` } component={MyCheckBoxComponent}>
<Field name={ `${item.value}` } component={MyDropDownComponent}>

发生的是它们每个都有唯一的name ，当我需要根据复选框选择更新值时，我什么也不能做。 我尝试将两个输入放在一个Field但无法正常工作。 帮助将不胜感激

Answer 1

您需要使用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');
  }
}

这样，您可以同时更新多个字段值。

希望这可以帮助。

Answer 2

可能，这就是您要寻找的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/