点击Label选中Checkbox异常：仅选中首个元素问题求助

问题出在所有复选框的id都是同一个值"todo"——HTML规范里id必须是页面全局唯一的，当label的htmlFor指向重复id时，浏览器只会匹配到第一个出现的对应元素，所以不管点哪个label，都会触发最上方的复选框。

解决步骤 #

给每个input生成唯一的id，比如利用每个todo项自带的item.id（你删除按钮已经在用这个id了），修改input和label的对应属性：

{list
  .filter((el) => {
    if (activeMenu === "All") {
      return true;
    } else if (activeMenu === "Doing") {
      return el.done === false;
    } else {
      return el.done === true;
    }
  })
  ?.map((item, i) => (
    <div className="todo-li" key={item.id}> {/* 建议用item.id当key，比uuid更稳定 */}
      <input
        id={`todo-${item.id}`} {/* 生成唯一id */}
        name="checkbox"
        className="todo-checkbox"
        type="checkbox"
        checked={item.done}
        onChange={() => onClickCheck(item)}
      />
      <label htmlFor={`todo-${item.id}`} className="todo-item"> {/* 对应唯一id */}
        {item.name}
      </label>
      <button
        id={item.id}
        className="delete-button"
        onClick={() => onClickDelete(item.id)}
      >
        <FaTrashAlt />
      </button>
    </div>
  ))}

这样每个label都会精准对应自己的复选框，点击就不会串了。另外提一句，你现在用uuidv4()作为列表项的key，其实用每个item自带的唯一id（item.id）当key更合适，因为uuid每次渲染都会变，可能导致不必要的组件重渲染。

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