理解原生HTML元素与自定义属性的限制

在React中，当您渲染一个原生HTML元素（例如

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

这些非标准属性并不会被DOM视为可访问的数据属性。当事件（如onClick）触发时，您通过event.target访问到的DOM元素将不会包含这些属性，因此尝试通过event.target.lat等方式获取数据会失败，返回undefined。

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

这是因为React在渲染原生HTML元素时，会过滤掉它不认识的属性，以保持DOM的整洁和符合标准。

使用HTML5数据属性（Data Attributes）解决问题

为了将自定义数据附加到HTML元素上，HTML5引入了数据属性（Data Attributes）。数据属性以data-前缀开头，后跟自定义的名称，例如data-latitude、data-airport-name等。浏览器会识别这些属性，并将其存储在元素的dataset属性中，从而允许J*aScript安全地访问它们。

1. 附加数据属性

在React中，您可以像传递普通属性一样，将数据属性附加到原生HTML元素上。请确保属性名遵循data-your-custom-name的格式。

<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>

注意事项：

• 命名规范： data-后的属性名可以使用小写字母、数字、连字符（-）。在J*aScript中访问时，连字符会被转换为驼峰命名法（例如data-airport-name在J*aScript中是dataset.airportName）。
• 数据类型： 数据属性的值始终是字符串。如果您存储的是数字、布尔值或对象，您需要在检索时进行类型转换（例如parseInt(), JSON.parse()）。
• 复杂对象： 如果需要存储整个J*aScript对象，您必须先使用JSON.stringify()将其转换为JSON字符串。

2. 从事件处理函数中访问数据

当事件触发时，您可以通过event.target.dataset对象来访问这些数据属性。dataset对象会包含所有以data-开头的属性，属性名将自动从连字符命名法转换为驼峰命名法。

一站式AI创作平台，免费AI图片和视频生成。

以下是修改后的handleLiClickFirst函数示例：

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); // 如果没有完整对象，则使用单独的名称
    }
};

3. 完整示例代码

结合上述修改，您的React组件代码将如下所示：

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;

最佳实践与替代方案

虽然数据属性是解决此类问题的有效方法，但在某些情况下，还有其他更符合React范式的方法值得考虑：

1. 避免存储整个对象： 尽量只存储您需要访问的最小数据单元（如ID、名称、坐标）。将整个复杂对象JSON.stringify到数据属性中可能会导致HTML属性字符串过长，增加DOM大小，并带来额外的序列化/反序列化开销。

2. 直接传递数据到事件处理函数： 如果您不需要将数据实际存储在DOM元素上，而是仅仅在事件触发时需要访问它，那么最直接且React-idiomatic的方式是直接将数据作为参数传递给事件处理函数。

   // 在map中
   <li
     key={airport.iata}
     onClick={() => handleLiClickFirst(airport)} // 直接传递airport对象
   >
     {airport.name}
   </li>
   
   // 事件处理函数
   const handleLiClickFirst = (selectedAirport) => {
     console.log("Selected Airport Object:", selectedAirport);
     setFirst(selectedAirport.name);
     // ... 其他逻辑
   };

   这种方法更简洁，避免了DOM操作，并且直接处理J*aScript对象，无需进行字符串化和解析。然而，如果您的需求是必须通过HTML属性来传递数据（例如，为了CSS选择器或其他非React的J*aScript逻辑），那么data-属性仍然是首选。

总结

当需要在React中将自定义数据附加到原生HTML元素并从事件处理函数中访问时，data-属性是标准且推荐的解决方案。它们允许您将字符串数据嵌入到HTML中，并通过event.target.dataset对象轻松检索。虽然直接将数据传递给事件处理函数在许多React场景中更为简洁和高效，但了解并正确使用data-属性对于处理特定需求或与传统J*aScript交互的场景至关重要。始终优先考虑存储最小必要数据，并注意数据类型的转换。