react表单提交如何默认全选
实现 React 表单默认全选的方法
使用 defaultChecked 属性
对于复选框（<input type="checkbox">），通过设置 defaultChecked={true} 可以让复选框默认选中。适用于非受控组件。
<input type="checkbox" defaultChecked={true} />受控组件结合 useState
通过状态管理实现全选逻辑。初始化状态为 true，并将状态绑定到复选框的 checked 属性。
const [isChecked, setIsChecked] = useState(true);
return (
<input
type="checkbox"
checked={isChecked}
onChange={(e) => setIsChecked(e.target.checked)}
/>
);多选框组默认全选
对于多个复选框，可以通过遍历数据并设置初始状态为全选。
const [selectedItems, setSelectedItems] = useState(
items.map(item => item.id) // 默认选中所有项的ID
);
return (
items.map(item => (
<input
key={item.id}
type="checkbox"
checked={selectedItems.includes(item.id)}
onChange={() => handleToggle(item.id)}
/>
))
);全选/反选功能
添加一个“全选”主复选框，控制所有子复选框的状态。
const [allChecked, setAllChecked] = useState(true);
const [selectedItems, setSelectedItems] = useState(items.map(item => item.id));
const handleSelectAll = (e) => {
setAllChecked(e.target.checked);
setSelectedItems(e.target.checked ? items.map(item => item.id) : []);
};注意事项
- 受控组件需绑定
onChange事件，否则用户无法修改状态。 - 对于动态数据，需在数据加载后更新默认选中状态（如
useEffect中处理）。
