默认情况下选中的复选框

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

老实说，我对 React 或 admin-on-rest 并不熟悉，所以我可能离题太远了，但是你不能把 checked: true 部分放到 choices 对象中吗？（即：{ id: 0, name: 'bar', checked: true }）

Answer 2

您应该在包含此输入的表单上使用 defaultValue。

关于全选按钮，可以在custom input中实现。您可能 copy/paste CheckboxGroupInput 的代码并在其中实现逻辑。

关于将值转换回数字，使用 normalize 属性：

<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 使用 defaultChecked，像这样：

options={{
    defaultChecked: true
}}

勾选DOC:

defaultChecked ===> bool ===> The default state of our checkbox component. Warning: This cannot be used in conjunction with checked. Decide between using a controlled or uncontrolled input element and remove one of these props.

默认情况下选中的复选框

Checkboxes checked by default

javascript

reactjs

admin-on-rest