在 React 中，单个 checkbox 的 value 属性原生只支持字符串，但可通过序列化（如 JSON 字符串）或巧妙利用数组转字符串机制，安全传递多个参数（如商品类型和价格），并在事件处理中解析使用。
在 react 中，单个 checkbox 的 `value` 属性原生只支持字符串，但可通过序列化（如 json 字符串）或巧妙利用数组转字符串机制，安全传递多个参数（如商品类型和价格），并在事件处理中解析使用。
在实际开发中，我们常遇到需要为一个复选框关联多个业务数据的场景——例如，用户勾选一款特色汉堡时，不仅要记录其类型（SpecBurgerType），还需同步获取对应价格（Price）。然而，HTML <input type="checkbox"> 的 value 属性仅接受字符串类型，直接传入对象或数组会自动调用 .toString()，导致信息丢失（如 [“Classic”, 12.99] 变成 "Classic,12.99"，无法可靠反解）。
✅ 推荐方案：使用 JSON 序列化 + 解析（健壮、语义清晰）
将两个值组合为对象并转为 JSON 字符串，赋给 value；在 onChange 中解析还原：
<input type="checkbox" value="{JSON.stringify({" type: item.specburgertype price: item.price onchange="{(e)"> {
const { type, price } = JSON.parse(e.target.value);
if (e.target.checked) {
setSpecOrder(type);
setPrice(price);
} else {
setSpecOrder("");
setPrice(0.0);
}
}}
/>
⚠️ 注意事项：
- 确保
item.Price是可序列化的原始值（数字、字符串等），避免传入函数或 undefined； - 若
item.SpecBurgerType含双引号或特殊字符，JSON 序列化仍能正确处理，比手动拼接更安全； - 不建议依赖
e.target.value.split(',')等字符串分割方式——一旦SpecBurgerType包含逗号（如"Veggie & Cheese"），解析将出错。
? 进阶优化：支持多选与状态管理
当前逻辑仅保存最后一个选中项。若需支持多选（如添加多款特色汉堡），应改用数组状态，并在 handleChange 中增删元素：
const [selectedBurgers, setSelectedBurgers] = useState([]);
const handleCheckboxChange = (item, e) => {
if (e.target.checked) {
setSelectedBurgers(prev => [...prev, item]);
} else {
setSelectedBurgers(prev => prev.filter(b => b.SpecBurgerType !== item.SpecBurgerType));
}
};
// JSX 中调用
<input type="checkbox" onchange="{(e)"> handleCheckboxChange(item, e)}
/>
这样既保持数据完整性，又符合 React 的不可变更新原则。总结：用 JSON.stringify 封装多值、JSON.parse 安全解构，是兼顾可读性、健壮性与兼容性的最佳实践。
