Javascript 更改<；td>；独立于反应js

我有三个

在一张桌子里面。我想独立更改

的颜色。单击，弹出一个模式，您可以选择颜色。现在，当我将颜色设置为on状态时，所有的

都会更改它们的背景色。我想单独更改每个

的颜色。因此，一个

可能是红色的，另一个

将是绿色的，而另一个

将是黄色的

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

state={visible:false，颜色：，文本：}；
showModal=（）=>{
这是我的国家({
可见：正确
});
};
框1=（值，文本）=>{
console.log（“dssdf”，值）；
这是我的国家(
{
颜色：值，
文本：文本
},
（）=>console.log（“这是wt”，这是.state.color）
);
};
boxes2=（值，文本）=>{
console.log（“vf”，值）；
这是我的国家(
{
颜色：值，
文本：文本
},
（）=>console.log（“这是wt”，这是.state.color）
);
};
boxes3=（值，文本）=>{
控制台日志（“sds”，值）；
这是我的国家(
{
颜色：值，
文本：文本
},
（）=>console.log（“这是wt”，这是.state.color）
);
};
render（）{
const yellow=“黄色”；
const blue=“蓝色”；
常量重新输入代码hered=“红色”；
const text=“颜色”；
设s=[1,2,3]；
设d=s.map（表=>(
{this.state.text}更改
颜色
));
返回(
{d}
此.boxes1（黄色，文本）}>
黄色的
此.boxes2（红色，文本）}>
红色
此.boxes3（蓝色，文本）}>
蓝色
);
}
}

预期：单击单个

时，背景颜色应仅更新该

更新

---

实际：单击时，所有

的背景颜色都会更改

我们必须有多个项目来表示多个

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

state={box1:{visible:false，颜色：，文本：}，
第2栏：{可见：假，颜色：，文本：}，
第3栏：{可见：假，颜色：，文本：}，}；
showModal=（）=>{
这是我的国家({
可见：正确
});
};
boxesChange=（值、文本、id）=>{
常数盒={
颜色：值，
文本：文本
};        
这是我的国家(
`${id}`:框，
（）=>console.log（“这是wt”，这是.state.color）
);
};
render（）{
const yellow=“黄色”；
const blue=“蓝色”；
常量重新输入代码hered=“红色”；
const text=“颜色”；
设s=[1,2,3]；
设d=s.map（表=>(
{this.state.text}更改
颜色
));
返回(
{d}
this.boxes1（黄色，文本，id）}>
黄色的
this.boxes2（红色，文本，id）}>
红色
this.boxes3（蓝色，文本，id）}>
蓝色
);
}
}

基于元素索引的动态样式渲染建议：

假设您已经渲染了以下多个元素，这只是一个示例，可以根据单击的元素索引将动态样式应用于元素，从而可以更改特定的元素样式：

伪代码：

const myStyleBackgroundColor = {};

allElementArray.map((item,index)=>
<div onClick={(e)=>onClickHandle(index)} style={{backgroundColor : myStyleBackgroundColor[index] ? myStyleBackgroundColor[index] : "#FFF" }}>
This is the div which will change color once clicked based on index
</div>
);

onClickHandle(index){
myStyleBackgroundColor [index] = "color";
// apply rest of index a default color
}

constmystylebackgroundcolor={}；
AllegementArray.map（（项目，索引）=>
onClickHandle（index）}style={{{backgroundColor:myStyleBackgroundColor[index]？myStyleBackgroundColor[index]：“#FFF”}}>
这是一个div，单击该div后将根据索引更改颜色
);
onClickHandle（索引）{
myStyleBackgroundColor[索引]=“颜色”；
//将索引的其余部分应用为默认颜色
}

---

注意：上面的常量也可以是局部状态下的变量数组。

我可以在代码中看到单个td，但单击是从不同的div触发的，所以您想用classname框或单个td更改div的颜色？单个td映射了3次，因此这会创建三个td[box]，我想做的是，单击单个td，我只需要更改td的背景色。在一个表中放置三个td应该是：在每三个表中放置td谢谢@imrajsah。因此，我需要多个项目来更改不同的元素。这就产生了另一个问题。我需要创建大约80个这样的td，这将使州的组成部分变得巨大。所以我认为我们必须在州内循环。这是正确的吗？所以你们可以创建一个状态为box的数组，然后把你们所有的数据都加到那个里。它将解决您在此处获取错误的问题：this.setState（

${id}

:box，（）=>console.log（“this is wt”，this.state.color））；}；setState中的id属性给了我一个错误