Semanti c UI Dropdown in React: onChange срабатывает дважды, когда используется как контент - PullRequest
Новая
       20

Semanti c UI Dropdown in React: onChange срабатывает дважды, когда используется как контент

1 голос
/ 04 февраля 2020

Я пытаюсь заменить содержимое раскрывающихся элементов Semanti c UI на ссылки <a href="" />, где их поведение по умолчанию (перенаправление на ссылку) будет отключено. Проще говоря, <a href="" /> должен появиться в DOM, но его поведение по умолчанию должно быть предотвращено.

Я столкнулся с проблемой, когда, если я помещаю <a href="..." /> в качестве содержимого выпадающего элемента, а затем пытаюсь выбрать какой-либо вариант (отличный от первого), событие onChange запускается дважды, где первое вхождение является ожидаемым, а второе всегда относится к первому элементу в раскрывающемся списке. В конце при первом выборе раскрывающегося списка всегда выбирается первый элемент раскрывающегося списка.

Пример кода можно найти здесь: https://codesandbox.io/s/semantic-ui-example-s6vz1?fontsize=14&hidenavigation=1&module=%2Fexample.js&theme=dark

Ошибка возникает при попытке чтобы выбрать 2-й, 3-й, ... вариант в раскрывающемся списке - обратите внимание, что в окне консоли дважды отображается событие ввода onChange.

РЕДАКТИРОВАТЬ:

Забыл упомянуть 2 важных вещи:

  • это происходит только тогда, когда раскрывающийся список загружен и ничего не выбрано
  • пользователь должен щелкнуть сам текст (т.е. по гиперссылке), чтобы он появился

Ответы [ 2 ]

0 голосов
/ 11 февраля 2020

Похоже, что компонент по какой-то причине вызывает событие / обработчик selectOnBlur, который затем устанавливает значение для первого элемента в раскрывающемся списке. Мне удалось заставить его работать правильно, когда я установил selectOnBlur поле в false.

Исправленный пример: https://codesandbox.io/s/semantic-ui-example-z4g9j

0 голосов
/ 05 февраля 2020

Вы можете сгенерировать опции самостоятельно (как в их первом примере ), чтобы вы могли установить as опору в a. 

<Dropdown
  placeholder="Select Friend"
  fluid
  onChange={this.onDropdownChange}
>
  <Dropdown.Menu>
    {friendOptions.map(option => (
      <Dropdown.Item
        as="a"
        href="http://codesandbox.io"
        key={option.value}
        text={option.text}
        image={option.image}
        // like `onChange`
        onClick={e => this.onDropdownChange(e, option)}
      />
    ))}
  </Dropdown.Menu>
</Dropdown>

https://codesandbox.io/s/semantic-ui-example-xse9m

Обратите внимание, что в их примере раскрывающийся список не имеет границы. Если вы хотите эту границу, вы можете добавить selection проп. Дело в том, что будет отображаться предупреждение:

Предупреждение: сбойный тип проп: проп children в Dropdown конфликтует с реквизитом: selection. Они не могут быть определены вместе, выберите один или другой.

Если вы хотите, вы, вероятно, можете добавить его обратно, используя css.

...