Hinzufügen/Entfernen von Elementen zu Array mit checkboks und reactjs

Question

Ich habe diesen Code, der die IDs der Checkboks in ein Array einfügt, aber wenn ich sie deaktiviere, entfernt sie sie nicht, ich benutze Update zu react-addons-update Anregungen

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

dank

Answer 1

// ändern Funktion wie diese machen.

Sie können die Arbeits Code hier http://codepen.io/umgupta/pen/dNVoBg Siehe Konsole Registerkarte unten

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