2019-09-12
描述
渲染一个多选框列表,可以使用回调函数向父组件传递被选中的一个或多个值。
- 使用
React.setState()
创建一个data
状态变量,设置options
属性为他的始化值 - 创建一个
toggle
方法,可以使用列表中checked
的选中与否来更新data
状态变量,可以调用组件属性中的onChange
回调 - 渲染一个
<ul>
元素,使用Array.prototype.map()
对data
状态变量进行迭代,每一项使用一个包含<input>
元素的<li>
元素作为他们的儿子 - 每一个
<input>
元素都包含type='checkbox'
属性,且标记为readOnly
,他的点击事件将会传递给父元素<li>
的onClick
来执行
实现
const style = {
listContainer: {
listStyle: 'none',
paddingLeft: 0
},
itemStyle: {
cursor: 'pointer',
padding: 5
}
};
function MultiselectCheckbox({ options, onChange }) {
const [data, setData] = React.useState(options);
const toggle = item => {
data.forEach((_, key) => {
if (data[key].label === item.label) data[key].checked = !item.checked;
});
setData([...data]);
onChange(data);
};
return (
<ul style={style.listContainer}>
{data.map(item => {
return (
<li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>
<input readOnly type="checkbox" checked={item.checked || false} />
{item.label}
</li>
);
})}
</ul>
);
}
使用
const options = [{ label: 'Item One' }, { label: 'Item Two' }];
ReactDOM.render(
<MultiselectCheckbox
options={options}
onChange={data => {
console.log(data);
}}
/>,
document.getElementById('root')
);