反应绑定到复选框并更新状态基于选中

Question

尝试检查复选框，您将看到未定义。这很奇怪，我认为我正确使用了find。或者有更好的方法来做到这一点？

http://jsbin.com/ficijuwexa/1/edit?js,console,output

class HelloWorldComponent extends React.Component { 

    constructor(){ 
    super() 
    this.handleChange = this.handleChange.bind(this); 
    this.state = { 
     "fruits":[ 
     {"name":"banana","value":true}, 
     {"name":"watermelon","value":false}, 
     {"name":"lemon","value":true}, 
     ] 
    } 
    } 

    handleChange(e,key){ 
     console.log(key) 

    console.log(e.target.checked) 

const newFruitsData = this.state.fruits.find(obj => { 
    obj.name === key ? obj.value = e.target.checked : '' 

}); 
console.log(newFruitsData) //why this is undefined?! 

    } 

    render() { 
    return (
     <div> 
     {this.state.fruits.map(obj => 
      <div key={obj.name}> 
      <label>{obj.name}</label> 
      <input onChange={(e) => this.handleChange(e, obj.name)} type="checkbox" defaultChecked={obj.value} /> 
      </div> 
     )} 
     <br /> 
     <pre>{JSON.stringify(this.state.fruits,null,2)}</pre> 
     </div> 
    ); 
    } 
} 

Answer 1

你发现没有返回语句，它总是返回undefined，而它应该返回布尔

const newFruitsData = this.state.fruits.find(obj => obj.name === key && obj.value === e.target.checked); 

Answer 2

在handleChange（）时，Array.prototype.find应该返回布尔：

handleChange(e,key){ 
    let nxState = Object.assign({}, this.state) 
    nxState.fruits.find(obj => { 
     if (obj.name === key) { 
     obj.value = e.target.checked 
     return true 
     } else { 
     return false 
     } 
    }); 
    this.setState(nxState) 
} 

而你应该使用setState()相反，它是我的课程

的意见---更新

Check it