我想使用react-hook 在我的HTML 页面上实现多个复选框。
我尝试使用这个 URL 来实现:https://medium.com/@Zh0uzi/my-concerns-with-react-hooks-6afda0acc672 https://medium.com/@Zh0uzi/my-concerns-with-react-hooks-6afda0acc672。在提供的链接中,它是使用类组件完成的并且工作完美,但是每当我使用 React hook setCheckedItems 来更新复选框选中状态时,它都不会重新渲染视图。
第一次渲染视图并且 console.log() 从 Checkbox 组件打印。单击复选框功能后处理更改被呼叫并且选中的项目更新值,但视图不再渲染(没有 console.log() 打印)。和{checkedItems.get("check-box-1")}也不打印任何值。
下面是我的示例代码。
复选框示例 :
import React, { useState } from 'react';
import Checkbox from '../helper/Checkbox';
const CheckboxExample = () => {
const [checkedItems, setCheckedItems] = useState(new Map());
const handleChange = (event) => {
setCheckedItems(checkedItems => checkedItems.set(event.target.name, event.target.checked));
console.log("checkedItems: ", checkedItems);
}
const checkboxes = [
{
name: 'check-box-1',
key: 'checkBox1',
label: 'Check Box 1',
},
{
name: 'check-box-2',
key: 'checkBox2',
label: 'Check Box 2',
}
];
return (
<div>
<lable>Checked item name : {checkedItems.get("check-box-1")} </lable> <br/>
{
checkboxes.map(item => (
<label key={item.key}>
{item.name}
<Checkbox name={item.name} checked={checkedItems.get(item.name)} onChange={handleChange} />
</label>
))
}
</div>
);
}
export default Example;
Checkbox:
import React from 'react';
const Checkbox = ({ type = 'checkbox', name, checked = false, onChange }) => {
console.log("Checkbox: ", name, checked);
return (<input type={type} name={name} checked={checked} onChange={onChange} /> )
}
export default Checkbox;