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 中处理）。