使用 redux-form 根据另一个字段的值显示/隐藏字段答案

【问题标题】：Show/hide field based on the value of another field using redux-form使用 redux-form 根据另一个字段的值显示/隐藏字段
【发布时间】：2017-11-16 17:52:11
【问题描述】：

我有一个字段，我想根据另一个字段的值隐藏它。为此，我现在正在使用警告道具，因为我可以获得当前值以及表单中其他字段的值。

是否可以创建可以将当前字段的值和表单的所有值作为参数的自定义道具（类似于警告和验证）？

还有哪些其他方法可以使用 redux-form 根据另一个字段的值隐藏/显示一个字段？

【问题讨论】：

标签： javascript reactjs redux redux-form

【解决方案1】：

您可以为此使用Fields 组件。它处理单个组件下各个字段的状态。

例子：

// outside your render() method
const renderFields = (fields) => (
  <div>
    <div className="input-row">
      <label>Category:</label>
      <select {...fields.category.input}>
        <option value="foo">Some option</option>
      </select>
    </div>
    { fields.category.input.value && (
      <div className="input-row">
        <label>Sub category</label>
        <select {...fields.subcategory.input}>
          <option value="foo">Some other option</option>
        </select>
      </div>
    )}
  </div>
)

// inside your render() method
<Fields names={[ 'category', 'subcategory' ]} component={renderFields}/>

【讨论】：

我想到了这个，但这需要Fields中的所有组件都由同一个组件函数定义。就我而言，这些字段可能不在同一附近。两个相关字段之间会有多个不相关的字段。
然后你可能想连接你的组件并使用表单值选择器之一。