react实现单选反选

实现单选和反选功能

在React中实现单选和反选功能可以通过状态管理来完成。以下是一个完整的实现示例：

import React, { useState } from 'react';

function SelectableList({ items }) {
  const [selectedItems, setSelectedItems] = useState([]);

  const toggleSelect = (item) => {
    if (selectedItems.includes(item)) {
      setSelectedItems(selectedItems.filter(i => i !== item));
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  const toggleSelectAll = () => {
    if (selectedItems.length === items.length) {
      setSelectedItems([]);
    } else {
      setSelectedItems([...items]);
    }
  };

  return (
    <div>
      <button onClick={toggleSelectAll}>
        {selectedItems.length === items.length ? '取消全选' : '全选'}
      </button>
      <ul>
        {items.map(item => (
          <li 
            key={item}
            onClick={() => toggleSelect(item)}
            style={{ 
              backgroundColor: selectedItems.includes(item) ? 'lightblue' : 'white',
              cursor: 'pointer'
            }}
          >
            {item}
          </li>
        ))}
      </ul>
      <p>已选择: {selectedItems.join(', ')}</p>
    </div>
  );
}

function App() {
  const items = ['苹果', '香蕉', '橙子', '葡萄'];
  return <SelectableList items={items} />;
}

export default App;

仅实现单选功能

如果只需要单选功能（不能多选），可以简化实现：

import React, { useState } from 'react';

function SingleSelectList({ items }) {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <div>
      <ul>
        {items.map(item => (
          <li 
            key={item}
            onClick={() => setSelectedItem(item)}
            style={{ 
              backgroundColor: selectedItem === item ? 'lightblue' : 'white',
              cursor: 'pointer'
            }}
          >
            {item}
          </li>
        ))}
      </ul>
      <p>已选择: {selectedItem || '无'}</p>
    </div>
  );
}

function App() {
  const items = ['红色', '绿色', '蓝色', '黄色'];
  return <SingleSelectList items={items} />;
}

export default App;

使用自定义钩子封装逻辑

可以将选择逻辑封装为自定义钩子，提高代码复用性：

import { useState } from 'react';

function useSelection(items) {
  const [selectedItems, setSelectedItems] = useState([]);

  const toggleSelect = (item) => {
    if (selectedItems.includes(item)) {
      setSelectedItems(selectedItems.filter(i => i !== item));
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  const toggleSelectAll = () => {
    setSelectedItems(selectedItems.length === items.length ? [] : [...items]);
  };

  return { selectedItems, toggleSelect, toggleSelectAll };
}

function SelectableList({ items }) {
  const { selectedItems, toggleSelect, toggleSelectAll } = useSelection(items);

  return (
    <div>
      <button onClick={toggleSelectAll}>
        {selectedItems.length === items.length ? '取消全选' : '全选'}
      </button>
      <ul>
        {items.map(item => (
          <li 
            key={item}
            onClick={() => toggleSelect(item)}
            style={{ 
              backgroundColor: selectedItems.includes(item) ? 'lightblue' : 'white',
              cursor: 'pointer'
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

这些实现方式可以根据实际需求进行调整，比如添加禁用状态、多级选择等复杂功能。