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

看起来像是Object:True被追加到数组中，而不是访问数组中的相关值

另外，在我打印ID时，它打印这个对象的onChange上，我对我们如何使用它有点困惑

[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]

---

所以我想我想弄清楚的是，我们如何将equipment.id传递到onChange中，以访问数组中的正确值，从而将其从true更改为false，或者将其从false更改为true？

好的，首先，您只有一个状态变量来确定是否勾选了复选框。选中一个复选框后，“isChecked”变为true，这将在下一次渲染时选中所有复选框。为了解决这个问题，我将isChecked转换为一个对象数组，这样您就可以使用equipment.id访问数组中相应的bool。在本例中，我将假设equipment.id是一个int，您的id列表从0开始。我们还假设设备中有三个项目

Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: MouseEvent, type: "change"…}

class.com组件{
fillCheckedArray（输入）{
var tempArray=[]；
用于（输入中的项目）{
tempArray.push（false）；
}
返回数组；
}
建造师（道具）{
超级（道具）；
//设备=道具数据；
var tempArray=此.fillCheckedArray（设备）；
this.setState（{isChecked:tempArray}）；
console.log（这个）
this.onChange=this.onChange.bind（this）；
}
//现在，我们传递一个参数来访问数组中的相关值
一次更改（id）{
var tempArray=this.state.isChecked.slice（）；
tempArray[id]=！tempArray[id]；
this.setState（{isChecked:tempArray}）；
}
//现在，每个复选框访问数组中相应的值，并调用
//使用其ID作为数组索引的onChange函数
render（）{
返回(
设备
{this.props.data.map（函数（设备、索引）{
返回
}，本页）
}   

)   
}
}

希望这能奏效。如果时间允许，我会创建一个函数，在初始化时填充isChecked数组，而不管设备中有多少项，但这取决于您

编辑：实现了建议的更改，现在自动填充isChecked数组。现在试一试。

class.Component{
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>
    )   
}
}

建造师（道具）{
超级（道具）；
//设备=道具数据；
//var tempArray=已填充已检查阵列（设备）；
arrayLength=props.data.length；
this.state={isChecked:newarray（arrayLength）.fill（false）}；
console.log（这个）
this.onChange=this.onChange.bind（this）；
} 
//现在，我们传递一个参数来访问数组中的相关值
一次更改（id）{
console.log（“id”，id）
var tempArray=this.state.isChecked.slice（）；
log（“temparraybefore！”，tempArray）
tempArray[id]=！tempArray[id]；
log（“temparray”，temparray）
this.setState（{isChecked:tempArray}）；
}
render（）{
返回(
设备
{this.props.data.map（函数（设备、索引）{
返回
}，本页）
}   

)   
}
}

---

绑定onChange时，需要在输入中添加“this”。

几点建议：1。您需要通过

this.state.a.slice（）

创建一个

状态数组

的副本，然后执行另一个操作，因为通过直接将数组分配给任何var，var将获得

数组

的引用，并且它将直接对原始

数组

进行所有更改，和

state

值只能通过

setState

2进行更改。不用

equipment.id

你可以使用

数组索引
：）这个slice（）东西解决了我过去遇到的很多神秘问题，谢谢。另外，您将如何访问设备数组的索引？
this.props.data.map（函数（设备，索引）
，现在使用此索引代替
设备.id
。获取此错误“未捕获引用错误：fillCheckedArray未在新设备的可能远景中定义，但请立即尝试。我已在您的构造函数之前声明fillCheckedArray。非常感谢！
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>
    )   
}
}

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