React-admin CheckboxGroupInput 默认选中一些复选框

Question

如何默认选中一些复选框

    <CheckboxGroupInput
      source="my_junction_table"
      choices={choices}
      optionText={<KioskCheckbox />}
      initialValue={[{ id: 4, checked: true }]}  // don't work
      defaultValue={[{ id: 4, checked: true }]}  // don't work
      options={{ checked: true }}                // check all
      optionValue="id"
    />

与

options={{ checked: true }}

所有复选框均已选中

与

initialValue={[{ id: 4, checked: true, value: true }]}
defaultValue={[{ id: 4, checked: true }]}

没有任何作用，我已经在react-admin repo中看到了文档和代码，找不到任何相关内容。

Answer 1

@Shevchuk Slavik 的答案几乎已经完成，只需将 'initialValue' 属性替换为 'defaultValue' 即可。 然后创建像这样的“选择”道具：

choices={[ { id: 'create',  checked: true }, { id: 'update'}, { id: 'approve'} ]}

Answer 2

我上周也遇到了同样的问题。 初始值应该是一个带有标识符的数组，对象数组将不起作用。 我是这样解决的：

import React from 'react';
import {CheckboxGroupInput} from 'react-admin';

export const CheckboxGroupInputMod = (props, {checkedProp = 'checked'}) => {
    let initialValue = [];
    props.choices.map(value => {
        if (value[checkedProp]) initialValue.push(value.id);
    })

    return <CheckboxGroupInput {...props} initialValue={initialValue} />;
}

export default CheckboxGroupInputMod;

Answer 3

如果您做出的选择列表如下，

您可以在

id

道具上写下您要选择的项目的

initialValue

。

const choices = [
  { id: 'm', name: 'Male' },
  { id: 'f', name: 'Female' }
];

如果您想同时选择男性和女性，您可以执行以下操作。

<CheckboxGroupInput
  source="my_junction_table"
  choices={choices}
  initialValue={['m', 'f']}
/>

Answer 4

在

"react-admin": "^4.14.0"

，我使用以下方法来实现结果。

const lensEraChoices = [
  { id: "Modern", name: "Modern" },
  { id: "Vintage", name: "Vintage" },
];

...

<CheckboxGroupInput
  source="lensEra"
  choices={lensEraChoices}
  onChange={handleChoicesChange}
  validate={validateCheckboxGroup}
  defaultValue={["Modern"]} //<---- Checks this option by default
 />