react全选框实现

实现 React 全选框功能

在 React 中实现全选框功能通常需要管理子选框的状态，并通过全选框控制所有子选框的选中状态。以下是一个完整的实现方案：

基础实现逻辑

1. 定义状态管理全选和子选框

   const [checkedAll, setCheckedAll] = useState(false);
   const [checkedItems, setCheckedItems] = useState(
   Array(items.length).fill(false)
   );

2. 全选框 change 事件处理

   const handleCheckAll = (e) => {
   const isChecked = e.target.checked;
   setCheckedAll(isChecked);
   setCheckedItems(checkedItems.map(() => isChecked));
   };

3. 单个选框 change 事件处理

   const handleCheckItem = (index) => (e) => {
   const newCheckedItems = [...checkedItems];
   newCheckedItems[index] = e.target.checked;
   setCheckedItems(newCheckedItems);
   setCheckedAll(newCheckedItems.every(Boolean));
   };

完整组件示例

import React, { useState } from 'react';

function CheckboxList({ items }) {
  const [checkedAll, setCheckedAll] = useState(false);
  const [checkedItems, setCheckedItems] = useState(
    Array(items.length).fill(false)
  );

  const handleCheckAll = (e) => {
    const isChecked = e.target.checked;
    setCheckedAll(isChecked);
    setCheckedItems(checkedItems.map(() => isChecked));
  };

  const handleCheckItem = (index) => (e) => {
    const newCheckedItems = [...checkedItems];
    newCheckedItems[index] = e.target.checked;
    setCheckedItems(newCheckedItems);
    setCheckedAll(newCheckedItems.every(Boolean));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checkedAll}
          onChange={handleCheckAll}
        />
        全选
      </label>

      {items.map((item, index) => (
        <div key={item.id}>
          <label>
            <input
              type="checkbox"
              checked={checkedItems[index]}
              onChange={handleCheckItem(index)}
            />
            {item.name}
          </label>
        </div>
      ))}
    </div>
  );
}

优化实现方案

1. 使用 useReducer 管理复杂状态

   
   const initialState = {
   checkedAll: false,
   checkedItems: Array(items.length).fill(false)
   };

function reducer(state, action) { switch (action.type) { case 'CHECK_ALL': return { checkedAll: action.payload, checkedItems: state.checkedItems.map(() => action.payload) }; case 'CHECK_ITEM': const newCheckedItems = [...state.checkedItems]; newCheckedItems[action.index] = action.payload; return { checkedAll: newCheckedItems.every(Boolean), checkedItems: newCheckedItems }; default: return state; } }

2. 使用自定义 hook 封装逻辑
```jsx
function useCheckboxList(initialItems) {
  const [state, dispatch] = useReducer(reducer, {
    checkedAll: false,
    checkedItems: Array(initialItems.length).fill(false)
  });

  const checkAll = (isChecked) => {
    dispatch({ type: 'CHECK_ALL', payload: isChecked });
  };

  const checkItem = (index, isChecked) => {
    dispatch({ type: 'CHECK_ITEM', index, payload: isChecked });
  };

  return [state, { checkAll, checkItem }];
}

性能优化建议

1. 对于大数据列表使用虚拟滚动技术
2. 使用 React.memo 优化子组件渲染
3. 避免在渲染函数中创建新函数

实际应用扩展

1. 添加 indeterminate 状态

   
   const isIndeterminate = 
   checkedItems.some(Boolean) && !checkedItems.every(Boolean);

<input type="checkbox" checked={checkedAll} ref={el => el && (el.indeterminate = isIndeterminate)} onChange={handleCheckAll} />

2. 与后端数据交互时处理
```jsx
// 初始化时从后端获取选中状态
useEffect(() => {
  async function fetchSelectedItems() {
    const response = await api.getSelectedItems();
    setCheckedItems(response.data);
    setCheckedAll(response.data.every(Boolean));
  }
  fetchSelectedItems();
}, []);