如何使用反应从下拉选择中获取值

Question

我一直在尝试使用 React 中的列表元素开发自定义下拉组件。发现以下解决方法非常有前途，但我对如何从下拉列表中 selected 项目时更改默认值感到困惑。例如：最初 "Select movie" 是 selected，当我 select 一个像这样的项目时： "The prestige" 它应该出现在字段中。

可以查看下面link中的演示： https://codesandbox.io/s/objective-williams-8je1y?file=/src/Dropdown.jsx

任何帮助都将是高度 appreciated.Thanks。

Answer 1

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

  const [dropdownTitle, setDropdownTitle] = useState(title)

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

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

最后设置 dropdownTitle 每当您 select 或单击一个项目时：

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

我修改了你的沙箱，看看这个：https://codesandbox.io/s/stoic-fog-98wce?file=/src/Dropdown.jsx

如何使用反应从下拉选择中获取值

How to get the value from drop down selection using react

javascript

forms

select

drop-down-menu

reactjs