ReactJS中复选框状态无法正常更新？求排查代码问题

嘿，我一眼就发现你代码里的问题啦！咱们一步步来看：

你的问题场景 #

你按照React官方表单规范实现了受控组件，把复选框抽成独立的CheckBox函数组件，用App类组件管理状态。姓名输入框的状态更新正常，但复选框点击后状态完全没反应，在handleChange里打印状态也看不到变化。

问题根源 #

你在CheckBox组件里的复选框绑定了props.handleChange，但在App组件调用CheckBox的时候，根本没把handleChange方法传递过去！

看你App组件里的这段代码：

<CheckBox a={this.state.a} b={this.state.b} c={this.state.c} />

这里只传递了a、b、c三个状态值，却漏掉了handleChange这个关键的事件处理函数，导致CheckBox里的props.handleChange是undefined——复选框的onChange事件等于没绑定任何处理逻辑，自然点了也不会更新状态。

另外还有个小细节：setState是异步操作，你直接在setState之后console.log(this.state)，打印的是更新前的旧状态，看不到最新值。

修复方案 #

1. 给CheckBox传递handleChange方法 #

修改App组件的render方法，给CheckBox加上handleChange属性：

render(){
  return(
    <div>
      <label>
        <p>Name</p>
        <input name="fullname" value={this.state.fullname} onChange={this.handleChange}/>
      </label>
      {/* 加上handleChange属性 */}
      <CheckBox 
        a={this.state.a} 
        b={this.state.b} 
        c={this.state.c} 
        handleChange={this.handleChange} 
      />
      <hr/>
    </div>
  )
}

2. 正确查看更新后的状态 #

把handleChange里的console.log放到setState的回调函数里，这样能确保拿到最新的状态：

handleChange(e) {
  const target = e.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;
  this.setState({ [name]: value }, () => {
    // 回调函数在状态更新完成后执行
    console.log(this.state.a);
    console.log(this.state.fullname);
  });
}

修复后的完整代码 #

CheckBox组件（无需修改） #

function CheckBox(props){
  return(
    <div>
      <p>Check all that apply:</p>
      <label>
        <input type="checkbox" name="a" checked={props.a} onChange={props.handleChange}/>
      </label>
      <br/>
      <label>
        <input type="checkbox" name="b" checked={props.b} onChange={props.handleChange}/>
      </label>
      <br/>
      <label>
        <input type="checkbox" name="c" checked={props.c} onChange={props.handleChange}/>
      </label>
      <hr/>
    </div>
  )
}

App组件（已修复） #

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      fullname: '',
      a: false,
      b: false,
      c: false
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({ [name]: value }, () => {
      console.log(this.state.a);
      console.log(this.state.fullname);
    });
  }

  render(){
    return(
      <div>
        <label>
          <p>Name</p>
          <input name="fullname" value={this.state.fullname} onChange={this.handleChange}/>
        </label>
        <CheckBox 
          a={this.state.a} 
          b={this.state.b} 
          c={this.state.c} 
          handleChange={this.handleChange} 
        />
        <hr/>
      </div>
    )
  }
}

这样修改后，复选框的状态就能正常更新啦！

内容的提问来源于stack exchange，提问作者AndrewL64