在React中通过HTML Data属性向原生元素传递数据并处理事件

<li
  key={airport.iata}
  airport={airport} // 尝试直接传递对象
  onClick={handleLiClickFirst}
  lat={airport.latitude} // 尝试传递单个属性
  name={airport.name}
  long={airport.longitude}
>
  {airport.name}
</li>

import React, { useState } from 'react';
import { TextField } from '@mui/material'; // 假设使用Material-UI的TextField

function AirportSearch() {
  const [first, setFirst] = useState('');
  const [resultFirst, setResultFirst] = useState({
    airports: [
      { 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 },
    ],
  });

  const handleLiClickFirst = (event) => {
    // 数据将从event.target.dataset中读取
    const { latitude, longitude, name, iata, airportdata } = event.target.dataset;

    console.log('点击的机场名称:', name);
    console.log('点击的机场纬度:', latitude);
    console.log('点击的机场经度:', longitude);
    console.log('点击的机场IATA:', iata);

    if (airportdata) {
      const airportObject = JSON.parse(airportdata);
      console.log('完整的机场对象:', airportObject);
      setFirst(airportObject.name); // 设置输入框的值为机场名称
    } else {
      setFirst(name); // 如果没有完整对象，则使用名称
    }
  };

  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-属性传递单个数据
            data-iata={airport.iata}
            data-latitude={airport.latitude}
            data-longitude={airport.longitude}
            data-name={airport.name}
            // 如果需要传递整个对象，必须将其JSON字符串化
            data-airportdata={JSON.stringify(airport)}
            onClick={handleLiClickFirst}
          >
            {airport.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AirportSearch;

const handleLiClickFirst = (event) => {
    // 从event.target.dataset中解构出数据
    const { latitude, longitude, name, iata, airportdata } = event.target.dataset;

    console.log('点击的机场名称:', name);
    console.log('点击的机场纬度:', latitude);
    console.log('点击的机场经度:', longitude);
    console.log('点击的机场IATA:', iata);

    if (airportdata) {
      // 如果传递的是字符串化的对象，需要使用JSON.parse()将其解析回来
      const airportObject = JSON.parse(airportdata);
      console.log('完整的机场对象:', airportObject);
      setFirst(airportObject.name);
    } else {
      setFirst(name);
    }
  };