带有多选功能的有状态复选框
渲染一个复选框列表,使用回调函数将选中的值/值传递给父组件。
- 使用
useState()
钩子创建data
状态变量,并使用options
属性初始化其值。 - 创建一个
toggle
函数,使用扩展运算符 (...
) 和Array.prototype.splice()
更新data
状态变量,并调用onChange
回调函数传递任何选中的选项。 - 使用
Array.prototype.map()
将data
状态变量映射到单独的<input type="checkbox">
元素。将每个元素包装在一个<label>
中,将onClick
处理程序绑定到toggle
函数。
const MultiselectCheckbox = ({ options, onChange }) => {
const [data, setData] = React.useState(options);
const toggle = index => {
const newData = [...data];
newData.splice(index, 1, {
label: data[index].label,
checked: !data[index].checked
});
setData(newData);
onChange(newData.filter(x => x.checked));
};
return (
<>
{data.map((item, index) => (
<label key={item.label}>
<input
readOnly
type="checkbox"
checked={item.checked || false}
onClick={() => toggle(index)}
/>
{item.label}
</label>
))}
</>
);
};
const options = [{ label: '选项一' }, { label: '选项二' }];
ReactDOM.createRoot(document.getElementById('root')).render(
<MultiselectCheckbox
options={options}
onChange={data => {
console.log(data);
}}
/>
);