我有三个<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>
的背景颜色已更改
最佳答案
我们必须有多个项目来表示多个 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>
);
}
}
关于javascript - 在react js中独立更改<td>的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56161429/