数据列表返回选项的数据值

Question

我想要一个 onChange 函数，仅当在数据列表中选择一个选项时才返回“选项的数据值”。

那么我如何返回数据值，它是所选选项的隐藏值。

  const [country, setCountry] = useState();
  const [countries, setCountries] = useState([]);
  <input
    list="dropdown__countries"
    className="header__dropbtn"
    placeholder="Search Country"
    onChange={setCountry(event.target.value)}
  />
  <datalist id="dropdown__countries">
    {props.countries.map((country) => (
      <option data-value={country.value} value={country.name} />
    ))}
  </datalist>

此代码段中的 onChange 仅返回输入数据.. 这不是我想要做的，我不想要输入数据，而是我想要（所选选项的数据值）

Answer 1

您错误地传递了 setCountry() 函数调用的值而不是函数。

改为这样做：

 const [country, setCountry] = useState();
  const [countries, setCountries] = useState([]);
  <input
    list="dropdown__countries"
    className="header__dropbtn"
    placeholder="Search Country"
    onChange={(event)=>setCountry(event.target.value)}
  />
  <datalist id="dropdown__countries">
    {props.countries.map((country) => (
      <option data-value={country.value} value={country.name} />
    ))}
  </datalist>

Answer 2

您可以找到具有给定当前value的country 。

function DataList(props) {
  const [countryValue, setCountryValue] = useState();

  function onChange(event) {
    const { value } = event.target;

    // find the country with the current selected value
    const country = props.countries.find((c) => c.name === value);

    if (country !== undefined) {
      // use selected country object here

      setCountryValue(country.value);
      console.log(country.value);
    }
  }

  return (
    <>
      <input
        list="dropdown__countries"
        className="header__dropbtn"
        placeholder="Search Country"
        onChange={onChange}
      />
      <datalist id="dropdown__countries">
        {props.countries.map((country) => (
          <option
            key={country.value}
            data-value={country.value}
            value={country.name}
          />
        ))}
      </datalist>
    </>
  );
}