当前位置：首页 > React

react实现选中

2026-01-26 15:00:55React

实现选中功能的基本方法

在React中实现选中功能可以通过多种方式完成，具体取决于应用场景和需求。以下是几种常见的实现方法：

状态管理 使用React的useState钩子来跟踪选中状态。创建一个状态变量存储选中项，并通过点击事件更新状态。

事件处理 为需要选中的元素添加onClick事件处理器。在事件处理器中更新状态以反映选中状态的变化。

条件渲染 根据选中状态动态应用样式或类名。使用条件判断或三元运算符来切换选中和非选中状态的外观。

单选功能的实现代码示例

以下是一个简单的单选功能实现示例，用户点击列表项时选中一项：

import React, { useState } from 'react';

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

  const items = ['Item 1', 'Item 2', 'Item 3'];

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

export default SingleSelectList;

多选功能的实现代码示例

对于需要多选的情况，可以使用数组来存储选中项：

import React, { useState } from 'react';

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

  const items = ['Item 1', 'Item 2', 'Item 3'];

  const toggleItem = (item) => {
    setSelectedItems(prev =>
      prev.includes(item)
        ? prev.filter(i => i !== item)
        : [...prev, item]
    );
  };

  return (
    <ul>
      {items.map((item) => (
        <li
          key={item}
          onClick={() => toggleItem(item)}
          style={{
            backgroundColor: selectedItems.includes(item) ? 'lightblue' : 'white',
            cursor: 'pointer'
          }}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

export default MultiSelectList;

使用自定义钩子封装选中逻辑

对于更复杂的应用，可以创建自定义钩子来复用选中逻辑：

import { useState } from 'react';

function useSelection(initialSelection = null, multiple = false) {
  const [selection, setSelection] = useState(initialSelection);

  const select = (item) => {
    if (multiple) {
      setSelection(prev => 
        Array.isArray(prev)
          ? prev.includes(item)
            ? prev.filter(i => i !== item)
            : [...prev, item]
          : [item]
      );
    } else {
      setSelection(item);
    }
  };

  return [selection, select];
}

export default useSelection;

表格行选中实现示例

在表格中实现行选中功能：

import React, { useState } from 'react';

function SelectableTable() {
  const [selectedRows, setSelectedRows] = useState([]);

  const data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];

  const toggleRow = (id) => {
    setSelectedRows(prev =>
      prev.includes(id)
        ? prev.filter(rowId => rowId !== id)
        : [...prev, id]
    );
  };

  return (
    <table>
      <thead>
        <tr>
          <th>Select</th>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <tr
            key={row.id}
            onClick={() => toggleRow(row.id)}
            style={{
              backgroundColor: selectedRows.includes(row.id) ? 'lightblue' : 'white',
              cursor: 'pointer'
            }}
          >
            <td>
              <input
                type="checkbox"
                checked={selectedRows.includes(row.id)}
                onChange={() => toggleRow(row.id)}
                onClick={(e) => e.stopPropagation()}
              />
            </td>
            <td>{row.id}</td>
            <td>{row.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default SelectableTable;