Javascript 如何使用布尔值呈现ant design复选框中的默认值？

我正在尝试使用ant design呈现复选框默认值

这是我要渲染的数据

plainOptions: [
    {
        name: "apple",
        is_enabled: "true",
    },
    {
        name: "orange",
        is_enabled: "true"
    },
    {
        name: "banana",
        is_enabled: "true"      
    },
    {
        name: "grape",
        is_enabled: "false",
    },
]

以下是组件：

                    <FormItemRow>
                        <Col span={24} style={colStyle}>
                            <FormItem label={'fruits'} colon={ false } style={{ marginBottom: 0 }}> 
                                <CheckboxGroup options={plainOptions} defaultValue={['true']}>
                                    {plainOptions.map(option => {
                                        return (
                                            <Checkbox key={option.label}>{option.label}</Checkbox>
                                        )
                                    })}
                                </CheckboxGroup>
                            </FormItem>
                        </Col>
                        </FormItemRow>

似乎defaultValue的工作原理与键一样

我还添加了Check组件内部的checked并指定了布尔值，但它也不起作用

---

如何在没有警告标志的情况下安全地在复选框内呈现默认值？

我实际上认为，关键错误是因为您使用了

选项。label

而不是

选项。name

。（在这种情况下，应该是未定义的）

您必须区分

值

和

选中值

。

值

是选中复选框时将返回的内容

如果您定义了一个值，但未选中该复选框，则不会发送该值

可以将复选框转换为受控输入（意思是：您有一个onChange事件，触发选中状态），并在

checked

prop中传递您的is_enabled值

<Checkbox key={option.name} checked={this.state.options[optionKey].is_enabled}>{option.name}</Checkbox>

{option.name}

首先，您使用了

选项。label

而不是

选项。name

，这会为所有键提供未定义的信息，这就是为什么您会收到相同键的警告

<Checkbox key={option.name}>{option.name}</Checkbox>

您将获得值数组作为onChange事件的param

onChange = (checkedList) => {
  this.setState({ checkedList });
}

在上面的示例中，我使用了checkedList初始状态作为默认值，并在onChange事件上指定了最新状态

this.state = {
 plainOptions: ["apple", "orange", "banana", "grape"],
 checkedList: ["apple", "banana"] // Default Value
};

onChange = (checkedList) => {
  this.setState({ checkedList });
}

<CheckboxGroup
  options={this.state.plainOptions}
  value={this.state.checkedList}
  onChange={this.onChange}
/>