ReduxForm 字段的两个输入答案

【问题标题】：Two inputs into ReduxForm fieldReduxForm 字段的两个输入
【发布时间】：2019-06-28 22:26:53
【问题描述】：

我有一个ReduxForm，我有一个由两种不同类型的输入组成的组件：一个单选按钮组和一个数字文本字段。有没有办法在ReduxFormField 中存储两个参数：选中的单选按钮的值和文本字段的值？应该如何使用format、normalize 属性和onChange 函数来组织它？目前我有类似（简化）的东西：

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

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

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

我以为onChange 可能会有所不同，但似乎并非如此。 onChange 只是获取当前与之交互的组件的所有属性（单选按钮组 OR 输入文本字段，但不是我需要的两个）。

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

【问题讨论】：

标签： redux radio-button redux-form

【解决方案1】：

我能够通过以下方式解决此问题。首先指定format参数以及当值为null时最开始返回什么：

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

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

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

并输入文本字段：

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

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

【讨论】：