Question

我正在尝试使用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 并分配了布尔值，但是它也不起作用。

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

Answer 1

我实际上认为，关键错误来自您使用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>

Answer 2

首先，您使用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事件上分配最新状态。

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

2 个答案: