在React中利用HTML Data属性向事件处理器传递列表项数据

// 错误的示例：直接在原生HTML元素上添加自定义属性
<li
  key={airport.iata}
  airport={airport} // 无效的自定义属性
  onClick={handleLiClickFirst}
  lat={airport.latitude} // 无效的自定义属性
  name={airport.name}
  long={airport.longitude}
>
  {airport.name}
</li>

const handleLiClickFirst = (event) => {
  // event.target.innerHTML 可以获取到内部文本
  setFirst(event.target.innerHTML);
  // 尝试访问 event.target.lat 会失败，因为 'lat' 不是原生HTML元素的有效属性
  console.log(event.target.lat);
};

// 正确的示例：使用 data-* 属性传递数据
<div className="header__first">
  {/* ... 其他组件 ... */}
  <ul>
    {resultFirst.airports?.map((airport) => (
      <li
        key={airport.iata}
        onClick={handleLiClickFirst}
        data-iata={airport.iata} // 传递 IATA 编码
        data-latitude={airport.latitude} // 传递纬度
        data-longitude={airport.longitude} // 传递经度
        data-name={airport.name} // 传递名称
        // 如果需要传递整个对象，可以将其序列化为JSON字符串
        // data-airport-data={JSON.stringify(airport)}
      >
        {airport.name}
      </li>
    ))}
  </ul>
</div>

const handleLiClickFirst = (event) => {
  const { target } = event;

  // 获取 li 元素的文本内容
  setFirst(target.innerHTML);

  // 通过 target.dataset 访问 data-* 属性
  const iata = target.dataset.iata;
  const latitude = target.dataset.latitude;
  const longitude = target.dataset.longitude;
  const name = target.dataset.name;

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

  // 如果传递了整个序列化的对象，需要进行反序列化
  // const airportDataString = target.dataset.airportData;
  // if (airportDataString) {
  //   try {
  //     const airportObject = JSON.parse(airportDataString);
  //     console.log('Airport Object:', airportObject);
  //     // 进一步使用 airportObject.latitude 等
  //   } catch (e) {
  //     console.error('Failed to parse airport data:', e);
  //   }
  // }
};