Question

我有一个ReduxForm，那里有一个组件，它由两种不同类型的输入组成：单选按钮组和数字文本字段。是否可以在ReduxForm Field中存储两个参数：选中的单选按钮的值和文本字段的值？应该如何使用format，normalize属性和onChange函数来组织它？目前，我有类似（简体）的内容：

export const ComplexField = (props) =>
const { onChange, ... } = props
return(<div>
  <RadioGroup onChange=... />
  <InputTextField onChange=...>
</div>)

基本上，我遇到的主要问题是数据从两个字段流到ReduxForm Field中。我尝试将format像这样提供给字段config json：

format: (radioVal, inputVal) => [radioVal, inputVal]

我认为onChange可能会有所不同，但事实并非如此。 onChange只是获取当前正在与之交互的组件的所有属性（单选按钮组OR输入文本字段，但并非我需要的全部）。

我要实现的行为如下：我有4个单选按钮，最后一个连接到数字类型的文本字段。当我选择最后一个单选按钮时，将启用文本字段，并且允许用户输入值。问题是，由于非常严格的Fields布局定位，我不能将两个组件分成两个不同的html。有没有一种方法可以与一个ReduxForm字段下的两个组件正确交互，或者根本不可能？

Answer 1

我能够通过以下方式解决此问题。首先指定format参数，并指定当值为null时返回的内容：

format: val => val || ['pli_0', null]

在这里可以看到，我正在使用redux存储写出的值的数组。然后，单选按钮组组件中的onChange方法：

onChange={({ checked }) => {
    if (checked) {
      onChange([option.value, option.inputVal])
    }   
}}

然后输入文本字段：

onChange={(val) => {
  onChange([value[0], val])
}}

单独的onChange方法获得不同的值，因为单选按钮和输入字段是两个不同的表单字段。但是随后包含它们的component得到了我指定的值数组。

ReduxForm字段中有两个输入

1 个答案: