React 中的 checkbox 必须通过 checked 属性显式绑定布尔状态，并配合 onChange 处理器更新，否则将表现为“不可交互”的非受控元素；本文详解如何将原始静态 checkbox 改造成可响应、可追踪的受控组件。

react 中的 checkbox 必须通过 `checked` 属性显式绑定布尔状态，并配合 `onchange` 处理器更新，否则将表现为“不可交互”的非受控元素；本文详解如何将原始静态 checkbox 改造成可响应、可追踪的受控组件。

在 React 中，checkbox 默认是非受控组件——若未声明 checked 属性并监听 onChange，即使用户点击，其视觉状态也不会同步更新，且 React 不会触发重渲染。你遇到的“点击无反应”问题，根源正在于此：当前 中的 缺少 checked 和 onChange，导致 React 完全忽略其交互行为。

Orderly Sdk React Hooks

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

✅ 正确做法：使用受控组件模式

需为每个 checkbox 绑定独立的状态（或统一管理），并通过 onChange 实时更新。推荐采用对象形式管理多个 checkbox 状态，便于扩展与维护：

const Filter = () => {
  const PriceArray = ["100", "300", "1000", "2000"];
  // 使用对象记录各价格项的选中状态：{ "100": true, "300": false, ... }
  const [selectedPrices, setSelectedPrices] = useState<record boolean>>({});

  const handlePriceChange = (price: string) => (e: React.ChangeEvent<htmlinputelement>) => {
    setSelectedPrices(prev => ({
      ...prev,
      [price]: e.target.checked
    }));
  };

  const headingClass = "text-[20px] text-blue-600 font-semibold";
  const inputClass =
    "mr-[15px] border-[2px] font-[300] w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 accent-blue-600";

  return (
    <div classname="bg-[white] 450:w-[450px] w-[100%] p-[20px] rounded-[20px] grid grid-flow-row grid-cols-1 450:grid-cols-2">
      <div classname="Price border-b-[2px] border-blue-600 mb-[20px] pb-[20px]">
        <p classname="{headingClass}">Price</p>
        {PriceArray.map((price) => (
          <div key="{price}" classname="flex items-center mt-2">
            <input type="checkbox" id="{`price-${price}`}" name="price" value="{price}" checked false onchange="{handlePriceChange(price)}" classname="{inputClass}"><label htmlfor="{`price-${price}`}" classname="ml-2">{price}</label>
          </div>
        ))}
      </div>
    </div>
  );
};</htmlinputelement></record>

⚠️ 关键注意事项

• id 和 htmlFor 必须严格匹配：确保 label 的 htmlFor 与 input 的 id 一致（如 id="price-100" ↔ htmlFor="price-100"），否则点击 label 无法聚焦/切换 checkbox。
• 避免使用 name={item} 动态命名：原代码中 name={item} 会导致所有 checkbox 共享 name，形成单选组（radio 行为），应统一设为 name="price" 或移除（多选无需 name）。
• 不要遗漏 key 值：map 渲染时必须用稳定唯一值作 key —— 此处 price 比索引 id 更安全（避免数组顺序变化引发状态错位）。
• 状态初始化建议：useState>({}) 显式声明类型，提升可维护性；首次访问 selectedPrices[price] 时回退为 false，避免 undefined 导致渲染异常。

? 总结

React 的 checkbox 不是“开箱即用”的交互元素，而是需要主动接管状态生命周期的受控组件。只要确保三点：
① checked 属性绑定 state；
② onChange 更新 state；
③ id/htmlFor 正确配对。
即可彻底解决点击失效问题，并为后续筛选逻辑（如提交选中价格、联动其他过滤条件）打下坚实基础。