Ant Design的多选框(Checkbox)组件确实不接受数组作为默认值。要解决这个问题,可以使用受控组件的方式来处理。
下面是一个使用受控组件来设置多选框默认值的示例代码:
import React, { useState } from 'react';
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const App = () => {
const [checkedValues, setCheckedValues] = useState(['A', 'B']); // 默认选中的值
const onChange = (checkedValues) => {
setCheckedValues(checkedValues);
};
return (
);
};
export default App;
在上面的代码中,我们使用了useState
钩子来定义一个checkedValues
状态,它的初始值为['A', 'B']
。然后,我们通过onChange
函数来更新checkedValues
状态。
在CheckboxGroup
组件中,我们设置了options
属性来定义多选框的选项,value
属性来设置默认选中的值,onChange
属性来监听多选框的变化并更新checkedValues
状态。
通过这种方式,我们可以使用数组作为默认值,并且能够正确地处理多选框的状态变化。