我想打印屏幕上复选框的状态

Question

基本上现在我在控制台打印一个新的数组，每次复选框被选中的新值，例如:结果[真，假，假];=如果第一个是唯一选中的复选框

现在我想在SimpleCard react组件中显示相应的文本，但是每次我选中或取消选中其中一个复选框时，它都必须相应地更改为创建的新数组。例如:第一个已检查，第二个未检查，第三个未检查等等……

希望我能给你解释清楚。

constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
//this.showlive = this.showlive.bind(this)
const checkboxList = [
{
id: "blu",
name: "blu",
value: "blu",
dimension: "sm",
label: "blu",
inputClass: [],
labelClass: [],
event: { onChange: this.onChange },
extraProps: { visible: true, checked: false }
},
{
id: "red",
name: "red",
value: "red",
dimension: "sm",
label: "red",
inputClass: [],
labelClass: [],
event: { onChange: this.onChange },
extraProps: { visible: true, checked: true }
},
{
id: "yellow",
name: "yellow",
value: "yellow",
dimension: "sm",
label: "yellow",
inputClass: [],
labelClass: [],
event: { onChange: this.onChange },
extraProps: { visible: true, checked: false }
}
]
this.state = {
error: null,
checkboxList: checkboxList
}
};
componentDidMount() {

}
onChange(event) {
const checkboxList = this.state.checkboxList.map((elem) => {
if (elem.name === event.target.name)
elem.extraProps.checked = event.target.checked
return elem


})
this.setState({ 
checkboxList: checkboxList,
SimpleCard: Body })
}
render(){
let i;
let Risultati = [];
for(i=0; i<3; i++){
let v = this.state.checkboxList[i].extraProps.checked;
Risultati.push(v)
return Risultati; 
}

console.log(Risultati);
const legend = "Checkbox"
return (
<div>
<Checkbox
checkboxList={this.state.checkboxList}
legend={legend}
></Checkbox>
<SimpleCard
title="Colors selected"
titleHeading="h2"
data={<p> Data</p>}
body={ <p> Here I want the text to be displayed </p>}
>
{" "}
</SimpleCard>
</div>
);
};
};

Answer 1

我想，你的变量"checkboxList"在状态下，react无法检测到变化。

这样怎么样

this.setState({ 
checkboxList: [...checkboxList],
SimpleCard: Body 
})