Выпадающее меню семантического пользовательского интерфейса в React: onChange запускается дважды, когда в качестве содержимого используется ‹a href›

Я пытаюсь заменить содержимое элементов раскрывающегося списка семантического пользовательского интерфейса, чтобы они содержали <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 важные вещи:

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

reactjs javascript semantic-ui-react semantic-ui
person Matus Nemcik    schedule 04.02.2020    source источник
comment
Невозможно воспроизвести: imgur.com/a/SAIJf7F   -  person Mosh Feu    schedule 04.02.2020
comment
Я отредактировал исходный пост, забыл упомянуть, что вам нужно щелкнуть сам текст, пример здесь: i.imgur.com/cKPF9Dq.gif   -  person Matus Nemcik    schedule 04.02.2020
comment
Вероятно, мы сможем покопаться в их коде и выяснить, почему это происходит. Вопрос в том, зачем вам это вообще a?   -  person Mosh Feu    schedule 05.02.2020
comment
это часть SEO   -  person Matus Nemcik    schedule 05.02.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете создать параметры самостоятельно (как в их первом примере ), поэтому вы можете установить опору 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.

person Mosh Feu    schedule 05.02.2020
comment
в чем будет разница с исходным решением? похоже, есть еще кое-что, что нужно решить, например, отключить поведение по умолчанию для ‹a href›, визуальных элементов, onChange, похоже, вообще не запускается - person Matus Nemcik; 08.02.2020
comment
Ты прав. Я обновил свой ответ. Похоже, что onChange не работает, когда в раскрывающемся списке есть меню внутри - person Mosh Feu; 09.02.2020

arrow_upward
0
arrow_downward

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

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

person Matus Nemcik    schedule 11.02.2020