Question

我有这个代码将checkboks的id插入一个数组，但如果我禁用它们，它不会删除它们，我使用update来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})
      })
   }
}
}

使用checkboks和reactjs

1 个答案: