如何使用response从下拉选择中获取值？

Posted 2021-05-05

我一直在尝试在react中使用列表元素开发一个自定义下拉组件。我发现，下面的工作很有前途，但我有点困惑，当一个项目从下拉菜单中被选中时，如何改变默认值。例如：最初 "选择电影 "被选中，当我选择一个项目，如。"声望 "应该会出现在字段中。

可以在下面的链接中查看这里的演示。https:/codesandbox.iosobjective-williams-8je1y?file=srcDropdown.jsx。

任何帮助都将是非常感激的.谢谢。

答案

要实现以下功能，你必须使用 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.iosstoic-fog-98wce?file=srcDropdown.jsx。