在React中通过HTML数据属性传递映射数组数据

<li
  key={airport.iata}
  airport={airport} // 非标准属性
  onClick={handleLiClickFirst}
  lat={airport.latitude} // 非标准属性
  name={airport.name}   // 非标准属性
  long={airport.longitude} // 非标准属性
>
  {airport.name}
</li>

const handleLiClickFirst = (airport) => {
    // airport.target.lat 将是 undefined
    console.log(airport.target.lat);
};

<li
  key={airport.iata}
  // 使用data-属性来存储数据
  data-iata={airport.iata}
  data-latitude={airport.latitude}
  data-longitude={airport.longitude}
  data-name={airport.name}
  // 如果需要传递整个对象，可以将其JSON字符串化
  data-airport-data={JSON.stringify(airport)}
  onClick={handleLiClickFirst}
>
  {airport.name}
</li>

const handleLiClickFirst = (event) => {
    // event.target 指向触发事件的 <li> 元素
    const targetLi = event.target;

    // 从 dataset 中获取数据
    const iata = targetLi.dataset.iata;
    const latitude = parseFloat(targetLi.dataset.latitude); // 转换为数字
    const longitude = parseFloat(targetLi.dataset.longitude); // 转换为数字
    const name = targetLi.dataset.name;

    console.log("IATA:", iata);
    console.log("Latitude:", latitude);
    console.log("Longitude:", longitude);
    console.log("Name:", name);

    // 如果存储了整个对象，需要JSON.parse()解析
    if (targetLi.dataset.airportData) {
        try {
            const airportObject = JSON.parse(targetLi.dataset.airportData);
            console.log("Full Airport Object:", airportObject);
            // 您可以使用这个对象来更新状态或其他逻辑
            setFirst(airportObject.name); // 例如，更新状态为机场名称
        } catch (e) {
            console.error("Error parsing airport data:", e);
        }
    } else {
        setFirst(name); // 如果没有完整对象，则使用单独的名称
    }
};

import React, { useState, useEffect } from 'react';
import { TextField } from '@mui/material'; // 假设您使用的是MUI组件

// 模拟数据，实际应用中可能来自API
const mockAirports = [
  { iata: 'JFK', name: 'John F. Kennedy International Airport', latitude: 40.6413, longitude: -73.7781 },
  { iata: 'LAX', name: 'Los Angeles International Airport', latitude: 33.9416, longitude: -118.4085 },
  { iata: 'ORD', name: 'O\'Hare International Airport', latitude: 41.9742, longitude: -87.9073 },
];

function AirportSelector() {
  const [first, setFirst] = useState('');
  const [resultFirst, setResultFirst] = useState({ airports: [] });

  useEffect(() => {
    // 模拟数据过滤
    if (first) {
      const filtered = mockAirports.filter(airport =>
        airport.name.toLocaleLowerCase().includes(first) ||
        airport.iata.toLocaleLowerCase().includes(first)
      );
      setResultFirst({ airports: filtered });
    } else {
      setResultFirst({ airports: mockAirports }); // 或清空
    }
  }, [first]);

  const handleLiClickFirst = (event) => {
    const targetLi = event.target;
    const name = targetLi.dataset.name;
    const iata = targetLi.dataset.iata;
    const latitude = parseFloat(targetLi.dataset.latitude);
    const longitude = parseFloat(targetLi.dataset.longitude);

    console.log("Selected Airport Details:");
    console.log("Name:", name);
    console.log("IATA:", iata);
    console.log("Latitude:", latitude);
    console.log("Longitude:", longitude);

    setFirst(name); // 更新TextField的值为选中的机场名称
    setResultFirst({ airports: [] }); // 清空列表
  };

  return (
    <div className="header__first">
      <TextField
        id="outlined-basic"
        label="From"
        variant="outlined"
        value={first}
        onChange={(e) => setFirst(e.target.value.toLocaleLowerCase())}
      />
      <ul>
        {resultFirst.airports?.map((airport) => {
          return (
            <li
              key={airport.iata}
              // 使用data-属性传递数据
              data-iata={airport.iata}
              data-latitude={airport.latitude}
              data-longitude={airport.longitude}
              data-name={airport.name}
              onClick={handleLiClickFirst}
            >
              {airport.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default AirportSelector;