在反应js中独立改变<td>的颜色

Question

我在一张桌子上有三个<td>。我想独立更改<td> 的颜色。 onClick ，弹出一个 Modal ，您可以选择颜色。现在，当我将颜色设置为状态时，所有<td> 都会更改它们的背景颜色。我想独立更改每个<td> 的颜色。所以一个<td> 可能是红色，另一个<td> 是绿色，另一个<td> 是黄色。

 state = { visible: false, color: "", text: ""  };
     showModal = () => {
    this.setState({
      visible: true
    });
  };
     boxes1 = (value, text) => {
        console.log("dssdf", value);
        this.setState(
          {
            color: value,
            text: text
          },
          () => console.log("this is wt", this.state.color)
        );
      };

      boxes2 = (value, text) => {
        console.log("vf", value);
        this.setState(
          {
            color: value,
            text: text
          },
          () => console.log("this is wt", this.state.color)
        );
      };

      boxes3 = (value, text) => {
        console.log("sds", value);
        this.setState(
          {
            color: value,
            text: text
          },
          () => console.log("this is wt", this.state.color)
        );
      };

     render() {
        const yellow = "yellow";
        const blue = "blue";
        const reenter code hered = "red";
        const text = "colors";

        let s = [1, 2, 3];

        let d = s.map(tables => (
          <div>
            <table
              style={{
                border: "1px solid black",
                width: "70px",
                background: `${this.state.color}`
              }}
            >
              <thead>
                <tr>
                  <td onClick={this.showModal}>{this.state.text}Change 
                   colors
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        ));
     return (
          <div>
            {d}
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <div className="boxes" onClick={()=>this.boxes1(yellow,text)}>
               YELLOW
              </div>
              <div className="boxes" onClick={() => this.boxes2(red,text)}>
               RED
              </div>
              <div className="boxes" onClick={() => this.boxes3(blue,text)}>
               BLUE
              </div>
            </Modal>
          </div>
        );
      }
    }

预期：当单击单个 <td> 时，背景颜色应仅针对该 <td> 更新进行更新。

实际：点击后，所有<td>的背景颜色都会改变

Answer 1

我们必须有多个项目来表示多个 div 元素，否则它将像您一样失败，即更改所有 div 颜色。
以下是代码：

state = { box1: {visible: false, color: "", text: ""},
box2: {visible: false, color: "", text: ""},
box3: {visible: false, color: "", text: ""},  };

     showModal = () => {
    this.setState({
      visible: true
    });
  };
   boxesChange = (value, text, id) => {
    const box={
            color: value,
            text: text
          };        
    this.setState(
          `${id}`:box,
          () => console.log("this is wt", this.state.color)
        );
      };

     render() {
        const yellow = "yellow";
        const blue = "blue";
        const reenter code hered = "red";
        const text = "colors";

        let s = [1, 2, 3];

        let d = s.map(tables => (
          <div>
            <table
              style={{
                border: "1px solid black",
                width: "70px",
                background: `${this.state.color}`
              }}
            >
              <thead>
                <tr>
                  <td onClick={this.showModal}>{this.state.text}Change 
                   colors
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        ));
     return (
          <div>
            {d}
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <div id="box1" className="boxes" onClick={()=>this.boxes1(yellow,text,id)}>
               YELLOW
              </div>
              <div id="box2" className="boxes" onClick={() => this.boxes2(red,text,id)}>
               RED
              </div>
              <div id="box3" className="boxes" onClick={() => this.boxes3(blue,text,id)}>
               BLUE
              </div>
            </Modal>
          </div>
        );
      }
    }