checkboksとreactjsを使って配列に要素を追加/削除する

Question

チェックボックスのIDを配列に挿入するこのコードはありますが、無効にしても削除されませんが、react-addons-update 任意の提案

 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

//はこのように機能をレンダリング変更します。

あなたがここに作業コードを見ることができるhttp://codepen.io/umgupta/pen/dNVoBg は下

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