如何使用布尔值在 ant design 复选框中呈现默认值?
How to render default value in ant design checkbox using boolean?
我正在尝试使用 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 并分配了布尔值,但它也不起作用。
如何在没有警告标志的情况下安全地在复选框内呈现默认值?
我实际上认为,关键错误来自于您使用 option.label
而不是 option.name
。 (在这种情况下应该是未定义的)
你必须区分 value
和 checked
。
value
是内容,如果复选框被选中,将返回该内容。
如果您定义了一个值,但未选中复选框,则无论如何都不会发送。
也许将复选框变成受控输入(意思是:你有一个触发选中状态的 onChange 事件)并在 checked
prop.
中传递你的 is_enabled 值
<Checkbox key={option.name} checked={this.state.options[optionKey].is_enabled}>{option.name}</Checkbox>
首先,您使用 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 呈现复选框默认值。
这是我要渲染的数据
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 并分配了布尔值,但它也不起作用。
如何在没有警告标志的情况下安全地在复选框内呈现默认值?
我实际上认为,关键错误来自于您使用 option.label
而不是 option.name
。 (在这种情况下应该是未定义的)
你必须区分 value
和 checked
。
value
是内容,如果复选框被选中,将返回该内容。
如果您定义了一个值,但未选中复选框,则无论如何都不会发送。
也许将复选框变成受控输入(意思是:你有一个触发选中状态的 onChange 事件)并在 checked
prop.
<Checkbox key={option.name} checked={this.state.options[optionKey].is_enabled}>{option.name}</Checkbox>
首先,您使用 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 事件上分配最新状态。