Как получить значение из раскрывающегося списка с помощью реакции

Question

Я пытался разработать настраиваемый выпадающий компонент, используя элементы списка в реакции. Нашел следующую работу очень многообещающей, но я немного смущен тем, как изменить значение по умолчанию, когда элемент выбран в раскрывающемся списке. Например: изначально выбрано «Выбрать mov ie», и когда я выбираю такой элемент, как «Престиж», он должен появиться в поле.

Можно проверить демонстрацию здесь по следующей ссылке: 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