javascript - 在反应js中独立改变颜色

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>改变

标签： javascriptarraysreactjs

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>
        );
      }
    }