javascript - 如何使用react从下拉选择中获取值

Question

我一直在尝试使用 react 中的列表元素开发自定义下拉组件。发现以下工作非常有希望，但我有点困惑当从下拉列表中选择一个项目时如何更改默认值。例如:最初选择“选择电影”，当我选择“声望”之类的项目时，它应该出现在字段中。

可以通过以下链接查看演示: https://codesandbox.io/s/objective-williams-8je1y?file=/src/Dropdown.jsx

任何帮助将不胜感激。谢谢。

Answer 1

要实现以下目的，您必须使用 title 属性作为新状态的默认值:

  const [dropdownTitle, setDropdownTitle] = useState(title)

然后使用dropdownTitle作为下拉列表的显示值:

  <p className="dd-header__title--bold">{dropdownTitle}</p>

最后，每当您选择或单击某个项目时，请设置 dropdownTitle:

  function handleOnClick(item) {
    setDropdownTitle(item.value)
    // rest of the code

我修改了您的沙箱，请查看:https://codesandbox.io/s/stoic-fog-98wce?file=/src/Dropdown.jsx