[英]How to associate multiple component in one redux-form Field component?
I have a scenario where there will be two fields of each item. 我有一个方案,其中每个项目都有两个字段。 One field is a checkbox and another is dropdown but the point is to get a pair of data from this and I am mapping this based on the item(they have category too).
一个字段是一个复选框,另一个字段是下拉列表,但重点是要从中获取一对数据,我根据项目(也有类别)对此进行映射。 And the dropdown depends on checkbox(when unchecked the dropdown is disabled and value is reset to none or zero)
下拉列表取决于复选框(当未选中时,下拉列表被禁用并且值重置为无或零)
I tried 我试过了
<Field name={ `${item.label}` } component={MyCheckBoxComponent}>
<Field name={ `${item.value}` } component={MyDropDownComponent}>
what happens is each of them have unique name
and I cant do anything when I need to update the values depending on the checkbox selections. 发生的是它们每个都有唯一的
name
,当我需要根据复选框选择更新值时,我什么也不能做。 I have tried putting the two inputs in one Field
but I can't get it to work. 我尝试将两个输入放在一个
Field
但无法正常工作。 Help would be much appreciated 帮助将不胜感激
You need to use Redux Fields ( https://redux-form.com/6.0.4/docs/api/fields.md/ ) not Redux Field. 您需要使用Redux字段( https://redux-form.com/6.0.4/docs/api/fields.md/ )而不是Redux字段。
You can create a separate component which wraps your check-box component and your drop-down component. 您可以创建一个单独的组件,用于包装您的复选框组件和下拉组件。
This is how you use it 这就是你的用法
<Fields
names={[
checkboxFieldName,
dropDownFieldName
]}
component={MyMultiFieldComponent}
anotherCustomProp="Some other information"
/>
And the props that you get in your MyMultiFieldComponent 以及在MyMultiFieldComponent中获得的道具
{
checkboxFieldName: { input: { ... }, meta: { ... } },
dropDownFieldName: { input: { ... }, meta: { ... } },
anotherCustomProp: 'Some other information'
}
The input property has a onChange property (which is a method), you can call it to update the respective field value. input属性具有onChange属性(这是一个方法),您可以调用它来更新相应的字段值。
For example in onChange method of check-box 例如在复选框的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');
}
}
This way you can update multiple field values at the same time. 这样,您可以同时更新多个字段值。
Hope this helps. 希望这可以帮助。
Probably, this is what are you looking for - formValues
decorator. 可能,这就是您要寻找的
formValues
装饰器。
Just wrap your dropdown with this decorator and pass the name into it of your checkbox so you will have access inside of the MyDropDownComponent
. 只需使用此装饰器包装下拉列表,然后将名称传递到复选框中,即可在
MyDropDownComponent
内部进行访问。
For example: 例如:
import { formValues } from 'redux-form';
<form ...>
<Field name="myCheckBox" component={MyCheckBoxComponent}>
<Field name="myDropdown" component={formValues('myCheckBox')(MyDropDownComponent)} />
</form>
So then myCheckBox
value will be passed as a prop. 因此,
myCheckBox
值将作为道具传递。
Performance note: 效果说明:
This decorator causes the component to render() every time one of the selected values changes.
每次选择的值之一更改时,此装饰器都会使组件渲染()。
Use this sparingly. 谨慎使用。
See more here - https://redux-form.com/7.3.0/docs/api/formvalues.md/ 在此处查看更多-https: //redux-form.com/7.3.0/docs/api/formvalues.md/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.