react 如何实现点击列表

实现点击列表项的功能

在React中实现点击列表项的功能，可以通过状态管理和事件处理来完成。以下是一个常见的实现方式：

import React, { useState } from 'react';

function ClickableList() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [selectedIndex, setSelectedIndex] = useState(null);

  const handleItemClick = (index) => {
    setSelectedIndex(index);
    console.log(`Clicked item: ${items[index]}`);
  };

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

export default ClickableList;

使用自定义组件实现可点击列表

对于更复杂的场景，可以将列表项封装为单独的组件：

import React, { useState } from 'react';

function ListItem({ item, isSelected, onClick }) {
  return (
    <li
      onClick={onClick}
      style={{
        cursor: 'pointer',
        backgroundColor: isSelected ? 'lightblue' : 'white',
        padding: '8px',
        margin: '4px'
      }}
    >
      {item}
    </li>
  );
}

function ClickableList() {
  const [items] = useState(['Apple', 'Banana', 'Orange']);
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <ul style={{ listStyle: 'none' }}>
      {items.map((item) => (
        <ListItem
          key={item}
          item={item}
          isSelected={selectedItem === item}
          onClick={() => setSelectedItem(item)}
        />
      ))}
    </ul>
  );
}

export default ClickableList;

处理列表项点击事件的高级模式

对于需要处理更复杂交互的情况，可以使用回调函数：

import React, { useState } from 'react';

function ClickableList({ items, onItemClick }) {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleClick = (index, item) => {
    setActiveIndex(index);
    onItemClick(item);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div
          key={index}
          onClick={() => handleClick(index, item)}
          style={{
            padding: '10px',
            margin: '5px',
            border: '1px solid #ddd',
            backgroundColor: activeIndex === index ? '#f0f0f0' : '#fff',
            cursor: 'pointer'
          }}
        >
          {item.name || item}
        </div>
      ))}
    </div>
  );
}

// 使用示例
function App() {
  const data = [
    { id: 1, name: 'First Item' },
    { id: 2, name: 'Second Item' },
    { id: 3, name: 'Third Item' }
  ];

  const handleItemSelection = (item) => {
    console.log('Selected item:', item);
  };

  return (
    <ClickableList 
      items={data} 
      onItemClick={handleItemSelection} 
    />
  );
}

export default App;

性能优化的点击列表实现

对于大型列表，可以使用React.memo优化性能：

import React, { useState, useCallback } from 'react';

const MemoizedListItem = React.memo(function ListItem({ item, isActive, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{
        padding: '8px 16px',
        margin: '4px 0',
        background: isActive ? '#e3f2fd' : 'white',
        border: '1px solid #ddd',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
    >
      {item.text}
    </div>
  );
});

function OptimizedClickableList({ items }) {
  const [activeId, setActiveId] = useState(null);

  const handleClick = useCallback((id) => {
    setActiveId(id);
  }, []);

  return (
    <div>
      {items.map((item) => (
        <MemoizedListItem
          key={item.id}
          item={item}
          isActive={activeId === item.id}
          onClick={() => handleClick(item.id)}
        />
      ))}
    </div>
  );
}

// 使用示例
function App() {
  const largeList = Array.from({ length: 100 }, (_, i) => ({
    id: i,
    text: `Item ${i + 1}`
  }));

  return <OptimizedClickableList items={largeList} />;
}

export default App;

这些实现方式涵盖了从基础到高级的各种场景，可以根据具体需求选择合适的方案。