如何使用 Redux-form 从复选框中获取值？答案

【问题标题】：How do I use Redux-form to get values from checkboxes?如何使用 Redux-form 从复选框中获取值？
【发布时间】：2016-06-21 21:26:25
【问题描述】：

如何将 redux 形式的复选框的默认布尔值更改为您在输入本身上指定的值？

例如，我有这样的输入：

<input type="checkbox" value="Pages missing or out of order" {...issue1} />

当 Redux 表单选择这个时，它只是给我一个真/假，即使我想要值“页面丢失或乱序”

我可以做这样的事情来到达我需要去的地方，以便在提交表单时，它会提交值“页面丢失或乱序，而不是真/假？

<input type="checkbox" onChange={value => console.log(value.target.value)} value="Pages missing or out of order" />

当我删除 {...issue1} 时，我的自定义 onChange 事件处理程序将被调用，但当我保留 {...issue1} 时，它会被完全忽略。

想法？

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

不，redux-form 将复选框视为布尔值。您必须将布尔值映射到其他地方的字符串。

【讨论】：

是的，我最终不得不走出 redux-form 以便让复选框做我想做的事情，包括编写自定义验证等。

【解决方案2】：

您需要boolean使用 format 属性从字符串映射到布尔值，并使用 normalize 属性从布尔值映射到字符串。

例如，

如果你有保存在redux状态的数据需要是字符串'1'或'0'，你需要使用<Field />来映射到true和false的默认值redux-form 复选框

<Field
  name='myCheckbox'
  type='checkbox
  format={v => v === '1'} // converts redux state string to boolean
  normalize={v => v ? '1' : '0'} // converts checkbox boolean to string
/>

同时使用 format 和 normalize，您可以在 redux 存储中将复选框 true 和 false 映射到 '1' 和 '0'。

【讨论】：