在react原生中保存平面列表项的按下项

import React, { useState } from 'react';

const ListItem = ({ item, index, onPress }) => {
  const [isSelected, setIsSelected] = useState(false);

  const handlePress = () => {
    setIsSelected(!isSelected);
    onPress(index); // 调用回调函数，并传递被按下的列表项的索引
  };

  return (
    <div className={isSelected ? 'selected' : ''}>
      <input type="checkbox" checked={isSelected} onChange={handlePress} />
      <span>{item}</span>
    </div>
  );
};

const List = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleItemPress = (index) => {
    setSelectedItem(index); // 更新被按下的列表项的索引
  };

  return (
    <div>
      <ListItem item="Item 1" index={0} onPress={handleItemPress} />
      <ListItem item="Item 2" index={1} onPress={handleItemPress} />
      <ListItem item="Item 3" index={2} onPress={handleItemPress} />
      {/* 其他列表项 */}
    </div>
  );
};