使用状态选中复选框时，将类应用于表行

Question

我在父组件中有一个简单的表，我在其中向子组件传递道具以创建行。如果选中复选框，我想将样式应用于行，如果未选中，我想删除它。所有选中的行都应该有样式。如何使用react states系统实现此功能？

子组件

render() {
return (
<tr>
<td>
<input className="action-check" type="checkbox"/>
</td>
<td>
<ButtonGroup />
</td>
<td>{this.props.name}</td>
<td>{this.props.date}</td>
</tr>
)
...

Answer 1

尝试使用钩子：

const [checked, setCheked] = useState(false)
return (
<tr className={"" + (checked ? "my-css-class" : "") }>
<td>
<input className="action-check" type="checkbox" onChange={(e)=> setCheked(e.target.checked)}/>
</td>
<td>
<ButtonGroup />
</td>
<td>{this.props.name}</td>
<td>{this.props.date}</td>
</tr>
)