Question

我在一个包含许多复选框的字段中使用CheckboxGroupInput，并且我希望默认情况下检查它们。

我尝试使用这样的options attribute：

<CheckboxGroupInput source="foo" choices={[
  { id: 0, name: 'bar' },
  { id: 1, name: 'bar' }
]} options={{
  checked: true
}}/>

但没有运气，默认情况下会检查所有复选框，但它们不可用：它们无法取消选中，也无法在POST / PUT请求中发送。

谢谢！

PS：check all按钮也可以很好，如果有人实施了我，我很高兴看到它是如何完成的。

Answer 1

老实说，我不熟悉反应或管理休息，所以我可能会离开这里，但你不能把checked: true部分放入选择对象中吗？（即：{ id: 0, name: 'bar', checked: true }）

Answer 2

您应该在表单上使用defaultValue，包括此输入。

关于全部检查按钮，可以在custom input中实施。您可以复制/粘贴CheckboxGroupInput的代码并在其中实现逻辑。

关于将值转换回数字，请使用normalize prop：

<CheckboxGroupInput
    normalize={value => value.map(v => parseInt(v, 10))}
    source="notifications"
    choices={[
        { id: 12, name: 'Ray Hakt' },
        { id: 31, name: 'Ann Gullar' },
        { id: 42, name: 'Sean Phonee' },
    ]}
/>

Answer 3

原因是：当您使用checked属性时，表示您正在使用controlled component并且checked的值始终为true：

checked : true

这就是为什么它的状态没有改变。

而不是checked使用defaultChecked，如下所示：

options={{
    defaultChecked: true
}}

检查 DOC ：

defaultChecked ===＆gt;布尔===＆gt;我们的复选框组件的默认状态。警告：这不能与选中一起使用。决定在使用受控或不受控制的输入元素和删除之间其中一个道具。

默认选中复选框

3 个答案: