Question

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，反之亦然？

Answer 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数组。现在试试吧。

Answer 2

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的输入中。

使用this.bind的多个复选框的事件处理程序？

2 个答案: