写一个React的表格组件,其中的每行为checkbox
时间: 2023-03-11 14:39:41 浏览: 239
使用 React 的组件来创建一个包含复选框的表格,可以使用以下代码:class CheckboxTable extends React.Component {
constructor(props) {
super(props); this.state = {
checkedItems: new Map(),
}; this.handleChange = this.handleChange.bind(this);
} handleChange(e) {
const item = e.target.name;
const isChecked = e.target.checked;
this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
} render() {
return (
<table>
<tbody>
{
this.props.items.map(item => (
<tr key={item.id}>
<td>
<label>
<input
name={item.name}
type="checkbox"
checked={this.state.checkedItems.get(item.name)}
onChange={this.handleChange}
/>
{item.name}
</label>
</td>
</tr>
))
}
</tbody>
</table>
);
}
}
阅读全文