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

【问题标题】：React-admin CheckboxGroupInput check some checkboxes by defaultReact-admin CheckboxGroupInput 默认选中一些复选框
【发布时间】：2020-10-24 08:23:24
【问题描述】：

如何让一些复选框默认选中

    <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 中看到了文档和代码，但找不到任何相关信息。

【问题讨论】：

标签： reactjs material-ui react-admin

【解决方案1】：

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

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;

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

您可以在initialValue 道具处写下您要选择的项目的id。

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

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

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

【讨论】：