React教程：在原生HTML元素上使用Data属性传递动态数据

import React, { useState } from 'react';

function AirportSelector({ airportsData }) {
  const [first, setFirst] = useState('');
  const resultFirst = { airports: airportsData }; // 模拟数据源

  const handleLiClickFirst = (event) => {
    // 数据将在事件处理函数中被解析
    // ...
  };

  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) => (
          <li
            key={airport.iata}
            data-iata={airport.iata} // 传递机场IATA代码
            data-lat={airport.latitude} // 传递纬度
            data-long={airport.longitude} // 传递经度
            data-name={airport.name} // 传递名称
            // 如果需要传递整个对象，必须先将其序列化为JSON字符串
            data-airport={JSON.stringify(airport)}
            onClick={handleLiClickFirst}
          >
            {airport.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 模拟TextField组件和airportsData
const TextField = ({ label, variant, value, onChange }) => (
  <input type="text" placeholder={label} value={value} onChange={onChange} style={{ margin: '10px 0', padding: '8px' }} />
);

const airportsData = [
  { 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 },
];

// 示例用法
// <AirportSelector airportsData={airportsData} />

const handleLiClickFirst = (event) => {
    // 从event.target.dataset中获取数据
    const { iata, lat, long, name, airport } = event.target.dataset;

    console.log('IATA:', iata);
    console.log('Latitude:', lat);
    console.log('Longitude:', long);
    console.log('Name:', name);

    // 如果传递了整个对象，需要进行JSON解析
    if (airport) {
      const parsedAirport = JSON.parse(airport);
      console.log('Parsed Airport Object:', parsedAirport);
      setFirst(parsedAirport.name); // 例如，更新TextField的值
    } else {
      setFirst(name); // 如果只传递了name
    }

    // 您现在可以根据需要使用这些数据
    // setFirst(name); // 更新输入框显示为机场名称
    // console.log(lat); // 现在可以正确读取纬度
};