使用this.bind的多個複選框的事件處理程序？

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

}

所以我們想你的編輯，但現在只有最後一個複選框作品，它只是切換到真實，不虛假。其餘的複選框甚至沒有顯示它們正在被選中，但正在擊中控制檯。

這就是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] 

好像對象：真被附加到陣列，而不是訪問陣列中的相關數值。

此外，onChange當我打印ID它打印這個對象，我有點困惑我們如何使用它。

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

所以我想我想就是弄明白，我們怎麼通過equipment.id到的onChange數組中訪問正確的值，將其從真更改爲false，反之亦然？

Answer 1

首先，您只有一個狀態變量，用於確定複選框是否被勾選。當你檢查一個時，isChecked會變爲true，這會檢查下一個渲染器上的所有複選框。要解決這個問題，我會將isChecked轉換爲一個對象數組，以便您可以使用equipment.id訪問數組中相應的布爾值。對於這個例子，我將假定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> 
) 
} 
} 

當綁定onChange時，需要在輸入中添加「this」。