React JS中点击checkbox获取对应name及当前选中值的实现问题

云上老周

2026-10-2

实现方案

问题修正点

首先修正你现有代码的两个小问题：

React 内置 DOM 属性采用小驼峰命名，你写的 DefaultChecked 写法错误，正确的非受控属性为 defaultChecked，但该属性仅在组件首次渲染时生效，后续状态变化无法同步更新复选框选中状态，因此推荐使用受控组件写法，用 checked 属性绑定 itm.taken。
无需通过 name 属性迂回拿 id，可以直接在事件绑定时传递参数，代码更直观。

实现方式1：通过事件对象获取参数

1. 调整输入框属性

<input
  name={itm.id}
  type="checkbox"
  checked={itm.taken} // 替换原来的DefaultChecked，绑定state值
  onChange={this.handleCheckClick}
/>

2. 编写事件处理函数

handleCheckClick = (e) => {
  // 直接从事件对象获取所需的两个值
  const targetId = e.target.name; // 对应itm.id
  const newTakenValue = e.target.checked; // 点击后最新的选中状态，勾选为true，取消为false

  // 如果需要同步更新state里的items数据，可执行以下逻辑
  this.setState(prev => ({
    items: prev.items.map(item => 
      item.id === targetId ? {...item, taken: newTakenValue} : item
    )
  }))
}

实现方式2：直接传递参数（更直观）

1. 调整事件绑定逻辑

直接在绑定onChange时传入当前遍历的itm相关参数，无需处理事件对象：

<input
  type="checkbox"
  checked={itm.taken}
  onChange={() => this.handleCheckClick(itm.id, !itm.taken)}
/>

2. 编写事件处理函数

handleCheckClick = (itemId, newTakenValue) => {
  // 直接拿到所需的id和最新选中状态
  // 同步更新state的逻辑和方式1一致
  this.setState(prev => ({
    items: prev.items.map(item => 
      item.id === itemId ? {...item, taken: newTakenValue} : item
    )
  }))
}