React中如何获取datalist选中选项的data-value值？

我明白你的需求——现在的onChange直接返回输入框的文本，但你只想在用户从datalist里选中具体选项时，拿到该选项的data-value（也就是country.value）。咱们来一步步调整代码解决这个问题：

首先得指出你当前代码里的一个小错误：onChange={setCountry(event.target.value)}这种写法会在组件渲染时就立刻执行setCountry，而不是在输入变化时触发，正确的做法是传递一个回调函数。

接下来，核心思路是：我们需要区分用户的输入是自由输入还是选中了datalist里的选项，只有当输入内容匹配某个选项的显示名称（country.name）时，才取出对应的data-value。

完整的修改后的代码 #

import { useState } from 'react';

function CountrySelector(props) {
  // 存最终选中的data-value
  const [selectedCountryValue, setSelectedCountryValue] = useState(null); 
  // 存输入框的显示文本，保证输入框正常响应用户输入
  const [inputText, setInputText] = useState('');

  const handleInputChange = (e) => {
    const currentInput = e.target.value;
    setInputText(currentInput);

    // 在props.countries里匹配输入内容对应的选项
    const matchedOption = props.countries.find(
      country => country.name === currentInput
    );

    if (matchedOption) {
      // 找到匹配的选项，更新为对应的data-value
      setSelectedCountryValue(matchedOption.value);
    } else {
      // 没有匹配到选项，清空选中值（也可以根据需求保留之前的选中值）
      setSelectedCountryValue(null);
    }
  };

  return (
    <>
      <input
        list="dropdown__countries"
        className="header__dropbtn"
        placeholder="Search Country"
        value={inputText}
        onChange={handleInputChange}
      />
      <datalist id="dropdown__countries">
        {props.countries.map((country) => (
          // 记得加key，React列表渲染的要求
          <option 
            key={country.value} 
            data-value={country.value} 
            value={country.name} 
          />
        ))}
      </datalist>
    </>
  );
}

关键说明 #

• 拆分状态：把输入框的显示文本和最终选中的data-value拆成两个状态，这样既保证输入框可以正常显示用户输入的内容，又能精准控制选中值的更新时机。
• 匹配逻辑：利用props.countries数组直接做匹配，比去DOM中查找选项更符合React的组件思维，避免不必要的DOM操作。
• 回调函数：onChange传入的是handleInputChange函数，而不是直接执行setState，确保只有在输入变化时才触发逻辑。

这样修改后，只有当用户从datalist中选中某个选项时，selectedCountryValue才会被设置为对应的data-value；如果用户只是自由输入没有匹配到选项，selectedCountryValue会被清空（你也可以根据需求调整else里的逻辑，比如保留之前的选中值）。

内容的提问来源于stack exchange，提问作者Adham Nasr