勾選復選框時更改表格背景顏色

Question

我有這個渲染：

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)}/>
                &nbsp;&nbsp; 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 名稱中？ 但它給了我

Answer 1

<table className={`checkbox-table ${this.state.backgroundColor}`}>

您的 onClickOfAgreement(pol) 函數可以將 state backgroundColor 設置為“已選中”，然后在 CSS 上：

.checked {
  background-color: #4f9f31;
}