javascript - 在react js中独立更改的颜色

Question

我有三个<td>在 table 里面。我想改变 <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>
        );
      }
    }