[英]Change table background color when checkbox is ticked
我有这个渲染:
render() {
const {policy} = this.props;
return (
<div className="my-content">
<table className="checkbox-table">
<label>
<input className="checkbox-round" type="checkbox" onClick={this.onClickOfAgreement(pol)}/>
Agree and access
</label>
</table>
</div>
这是我正在使用的 CSS:
.my-content {
position: relative;
background-color: #fefefe;
padding: 0;
}
.checkbox-table {
margin: 10px;
border-radius: 7px;
width: auto;
padding: 10px;
}
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid grey;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: #4f9f31;
border-color: #fefefe;
border-width: 3px;
}
当勾选复选框时,我希望整个表格背景也变成#4f9f31
。 这是怎么做到的?
我尝试了Property 'value' does not exist on type 'Readonly<{}>'中的解决方案,但在我的浏览器中导致了此错误:
类型“Readonly<{}>”上不存在属性“backgroundColor”
我添加了一个 State 接口来解决错误,但随后得到TypeError: Cannot read properties of null (reading 'backgroundColor')
。 我似乎错过了一些东西。 如何将 class 动态添加到手动 class 名称中? 但它给了我
<table className={`checkbox-table ${this.state.backgroundColor}`}>
您的 onClickOfAgreement(pol) 函数可以将 state backgroundColor 设置为“已选中”,然后在 CSS 上:
.checked {
background-color: #4f9f31;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.