React函数组件复选框需点击两次才生效问题排查求助

核心问题是你的复选框没有绑定checked属性，导致它属于「非受控组件」，React状态和DOM元素的实际状态不同步，所以需要点击两次才能看到状态更新。

解决步骤 #

把复选框改成「受控组件」，给它绑定checked属性，关联你的状态变量：

<input
  type="checkbox"
  id="search1"
  name="search1"
  checked={searchPropRef} // 新增这行，绑定状态
  onClick={(e) => handleSearchPropRef(e)}
/>

另外，对于复选框这类表单元素，更推荐用onChange事件而非onClick，语义更准确，修改后：

<input
  type="checkbox"
  id="search1"
  name="search1"
  checked={searchPropRef}
  onChange={(e) => handleSearchPropRef(e)} // 替换为onChange
/>

你的处理函数本身逻辑没问题，还可以简化写法：

const handleSearchPropRef = (e) => {
  setSearchPropRef(e.target.checked);
};

为什么会出现两次点击的问题？ #

第一次点击复选框时，onClick触发并更新了searchPropRef的状态，但因为复选框没有绑定checked，DOM的实际选中状态不会跟着React状态同步更新。第二次点击时，DOM的选中状态才会和React状态对齐，这时候你才能在页面上看到变化。

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