reactjs - 如何使用 Redux-form 从复选框获取值？

Question

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

例如，我有这样的输入:

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

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

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

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

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

想法？

Answer 1

您需要使用两者format属性来从字符串映射到 bool 值，并使用normalize属性来从 bool 值映射到字符串。

例如，

如果你有以 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
/>

同时使用格式和规范化，您可以保留复选框 true和false映射到'1'和'0'在你的 redux 存储中。