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

Posted 2023-03-07

【中文标题】如何使用布尔值在 ant design 复选框中呈现默认值？

【英文标题】：How to render default value in ant design checkbox using boolean?

【发布时间】：2019-12-31 04:28:51

【问题描述】：

我正在尝试使用 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>

我得到了我想看到的结果，但是在 CheckboxGroup 组件中使用 defaultValue 的问题是我收到警告说

Warning: Encountered two children with the same key, `true`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

似乎 defaultValue 就像 key 一样工作。

我还在 Check 组件内添加了 checked 并分配了布尔值，但它也不起作用。

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

【参考方案1】：

首先，您使用option.label 而不是option.name，这会为所有键提供未定义，这就是您收到相同键警告的原因。

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

如果您使用 CheckboxGroup，则不需要使用 Checkbox。 你可以像这样使用CheckboxGroup...

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

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

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

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

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

【参考方案2】：

我实际上认为，关键错误来自您使用option.label 而不是option.name。 （在这种情况下应该是未定义的）

您必须区分value 和checked。 value 是内容，如果选中复选框，将返回。

如果您定义了一个值，但未选中该复选框，则无论如何它都不会发送。

也许将复选框变成一个受控输入（意思是：你有一个 onChange 事件，它触发一个检查状态）并在 checked 属性中传递你的 is_enabled 值。

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