React类组件中如何获取复选框的上一状态值并对比新值？

开发者阿泽

2026-8-18

复选框新旧状态对比与保存按钮启用处理

场景：初始复选框处于勾选状态且已保存该值，编辑时取消勾选，但保存按钮未触发启用——原因是当前状态直接更新为未勾选（false），无法通过当前状态判断是否有变更，需要对比原始保存状态和当前修改状态。

原代码：

state = {
  status: false,
}

handleChange = (event) => {
  this.setState((prevState) => {
    return {
      ...prevState,
      status: !prevState.status
    }
  })
}

解决思路

需要额外维护一个记录原始保存状态的变量，用来和当前状态做对比，以此判断是否启用保存按钮：

初始化时，把已保存的勾选状态（true）存入savedStatus
修改复选框时，只更新当前status，保留savedStatus不变
通过status !== savedStatus的结果来控制保存按钮的启用/禁用
点击保存后，再把savedStatus同步为当前的status

修改后的代码

state = {
  // 当前复选框状态
  status: true,
  // 记录已保存的原始状态（初始为勾选）
  savedStatus: true,
}

handleChange = (event) => {
  this.setState((prevState) => ({
    ...prevState,
    status: !prevState.status
  }))
}

// 保存按钮点击事件
handleSave = () => {
  this.setState((prevState) => ({
    ...prevState,
    savedStatus: prevState.status
  }))
  // 这里执行你的保存逻辑，比如接口请求
}

// 在渲染时控制保存按钮状态
render() {
  const { status, savedStatus } = this.state
  const isSaveEnabled = status !== savedStatus

  return (
    <div>
      <input
        type="checkbox"
        checked={status}
        onChange={this.handleChange}
      />
      <button disabled={!isSaveEnabled} onClick={this.handleSave}>
        保存
      </button>
    </div>
  )
}