class Equipments extends React.Component {
constructor(props) {
super(props);
arrayLength = props.data.length;
this.state = { isChecked: new Array(arrayLength).fill(false) };
this.onChange = this.onChange.bind(this);
}
onChange(id){
console.log("id",id)
var tempArray = this.state.isChecked;
// console.log("temparrayBeforechange",tempArray[id])
// tempArray[id] == true ? tempArray = false : tempArray = true;
tempArray[id] = !tempArray[id];
// console.log("temparrayAFTERchange",tempArray[id])
this.setState({isChecked: tempArray});
}
render(){
var label = this.state.isChecked ? console.log("TRUE") : console.log("FALSE");
console.log(this.state.isChecked)
return(
<div>
<h1> Equipments </h1>
<ul> {this.props.data.map(function(equipment){
return <span key={equipment.id}>
<form>
<label>
{console.log("id", equipment.id)}
<input
name="isChecked"
value={equipment}
type="checkbox"
checked={this.state.isChecked[equipment.id]}
onChange={this.onChange.bind(equipment.id)}
/>
<a href={'/equipment/' + equipment.id} > {equipment.name}</a>
{label}
</label>
</form>
</span>
},this)
}
</ul>
</div>
)
}
}
所以我们尝试了你的编辑,但现在只有最后一个复选框工作,它只切换到true,而不是false。其余的复选框甚至没有显示它们正在被选中,但正在击中控制台。
这就是this.state.isChecked正在打印的内容:
[false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, [object Object]: true]0: false1: false2: false3: false4: false5: false6: false7: false8: false9: false10: false11: false12: false13: false14: false[object Object]
似乎将Object:True附加到数组而不是访问数组中的相关值。
另外,在onChange上打印ID时会打印出这个对象,我对我们如何使用它感到困惑。
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: MouseEvent, type: "change"…}
所以我想我想弄清楚的是,我们如何将equipment.id传递给onChange以访问数组中的正确值,将其从true更改为false,反之亦然?
答案 0 :(得分:1)
首先,您只有一个状态变量,用于确定是否勾选了复选框。当你检查一个时,isChecked变为true,它会检查下一个渲染的所有复选框。为了解决这个问题,我将isChecked转换为一个对象数组,以便您可以使用equipment.id访问数组中相应的bool。对于这个例子,我将假设equipment.id是一个int,你的id列表从0开始。我们也假设设备中有三个项目。
class Equipments extends React.Component {
fillCheckedArray(input) {
var tempArray = [];
for (item in input) {
tempArray.push(false);
}
return tempArray;
}
constructor(props) {
super(props);
// equipments = props.data;
var tempArray = this.fillCheckedArray(equipment);
this.setState({ isChecked: tempArray });
console.log(this)
this.onChange = this.onChange.bind(this);
}
//We now pass a parameter to access the relevant value in the array
onChange(id){
var tempArray = this.state.isChecked.slice();
tempArray[id] = !tempArray[id];
this.setState({isChecked: tempArray});
}
//Now each checkbox accesses its corresponding value in the array, and calls
//the onChange function using their ids as array indexes
render(){
return(
<div>
<h1> Equipments </h1>
<ul> {this.props.data.map(function(equipment, index){
return <span key={equipment.id}>
<form>
<label>
<input
name="isChecked"
type="checkbox"
checked={this.state.isChecked[index]}
onChange={this.onChange.bind(index)}
/>
<a href={'/equipment/' + equipment.id} > {equipment.name}</a>
</label>
</form>
</span>
},this)
}
</ul>
</div>
)
}
}
希望这有效。时间允许,我会在初始化时创建一个填充isChecked数组的函数,无论设备中有多少项,但这取决于你。
编辑:实施建议的更改,现在自动填充isChecked数组。现在试试吧。
答案 1 :(得分:0)
class Equipments extends React.Component {
constructor(props) {
super(props);
// equipments = props.data;
// var tempArray = fillCheckedArray(equipment);
arrayLength = props.data.length;
this.state = { isChecked: new Array(arrayLength).fill(false) };
console.log(this)
this.onChange = this.onChange.bind(this);
}
//We now pass a parameter to access the relevant value in the array
onChange(id){
console.log("id",id)
var tempArray = this.state.isChecked.slice();
console.log("temparraybefore!", tempArray)
tempArray[id] = !tempArray[id];
console.log("temparray",tempArray)
this.setState({isChecked: tempArray});
}
render(){
return(
<div>
<h1> Equipments </h1>
<ul> {this.props.data.map(function(equipment, index){
return <span key={equipment.id}>
<form>
<label>
<input
name="isChecked"
type="checkbox"
checked={this.state.isChecked[equipment.id]}
onChange={this.onChange.bind(this,index)}
/>
<a href={'/equipment/' + equipment.id} > {equipment.name}</a>
</label>
</form>
</span>
},this)
}
</ul>
</div>
)
}
}
你需要添加&#34;这个&#34;在绑定onChange的输入中。