添加/刪除元素與數組與檢查和反應

Question

我有這個代碼插入到數組中的checkboks的ID，但如果我禁用它們，它不會刪除它們，我使用更新react-addons更新 任何建議

 constructor(props) { 
     super(props); 
     this.state={ 
      keyGen:[] 
     } 
     } 
     render(){ 
     <form> 
      {this.renderElements()} 
      <input type="submit" value="Save" /> 
     </form> 
     renderElement(){ 
     return this.props.Elements.map((item, index)=>{ 
render(
     <Input name='list' type='checkbox' onClick={()=>this.updateStateList(item.id)} label='Add' className='listTour' /> 
     ) 
     }) 
     } 

     updateStateList(value){ 
     this.setState(update(this.state, {keyGen: {$push:[value]}})) 
     console.log(this.state.keyGen) 
     } 

感謝

Answer 1

//修改渲染功能是這樣的。

您可以在底部

class UpdateStateDemo extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state={keyGen:[]} 
     } 

     render(){ 
     console.log(this.state) 
     return (
     <form> 
      { 
       this.props.Elements.map((item, index)=>{ 
       return (
        <input 
        key={item} 
        name='list' 
        type='checkbox' 
        onClick={(e)=>this.updateStateList(e,item)} 
        label='Add' 
        className='listTour' /> 
       ) 
      }) 
      } 
      <input type="submit" value="Save" /> 
     </form> 
     ) 
     } 

    updateStateList(e, value){ 
    console.log(e.target.checked) 
    if (e.target.checked){ 
     //append to array 
     this.setState({ 
     keyGen: this.state.keyGen.concat([value]) 
     }) 
    } else { 
     //remove from array 
     this.setState({ 
     keyGen : this.state.keyGen.filter(function(val) {return val!==value}) 
     }) 
    } 
} 
}