反應綁定到複選框並更新狀態基於選中

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