Question

我有一个复选框列表，我可以在用户选中或取消选中时更新其对象数组。但我有一个问题，即使我更新状态，另一个值仍保持不变。

http://jsbin.com/qomekohile/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},
        {"name":"other","value":true,"other_value":"Durian"}
      ]
    }
  }

  handleChange(e,key){
    let nxState = Object.assign({}, this.state)
    nxState.fruits.find(obj => {



      if (obj.name === key) {
        obj.value = e.target.checked

        if(obj.name === 'other' && obj.value === false){
           obj.other_value = ''; //why this won't work
        }

        return true
      } else {
        return false
      }
    });
    this.setState(nxState)
  }

  render() {
    return (
      <div>
        {this.state.fruits.map(obj => 
           (obj.name === 'other') ?

           <div>
           <label>{obj.name}</label>
           <input onChange={(e) => this.handleChange(e, obj.name)} type="checkbox" defaultChecked={obj.value} />
           <input type="text" defaultValue={obj.other_value} />
           </div>
           :
           <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

您应该设置value并定义一些changeHandler以使此输入受控（defaultValue attr仅适用于不受控制的字段）：

<input type="text" value={obj.other_value} onChange={(e) => this.handleOtherChange(e)}/>

//example `other` text input change handler
handleOtherChange(e){
    let nxState = {...this.state, fruits: [
       ...this.state.fruits,
    ]};
    nxState.fruits.find(obj => obj.name === 'other').other_value = e.target.value;
    this.setState(nxState)
}

另请注意，Object.assign只执行对象的浅层合并，因为应该避免直接改变状态对象，您必须执行深层状态复制（以复制嵌套对象和数组），这可以使用扩展语法来完成如上例所示，但我建议使用immutability-helper或Immutable以不可变的方式执行状态更新。

状态更新但反应没有显示UI的反映

1 个答案: