React 中的语义 UI 下拉：onChange 在<a href>用作内容</a>时触发两次

Question

我正在尝试替换 Semantic UI Dropdown 项的内容以包含<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

当您尝试在下拉列表中选择 2nd、3rd、... 选项时会发生错误 - 请注意控制台窗口会显示两次 onChange 条目事件。

编辑：

忘了提两件重要的事情：

• 它仅在加载下拉列表且未选择任何内容时发生
• 用户必须点击文本（即超链接）本身才能发生

Answer 1

您可以自己生成选项（就像在他们的 第一个示例中一样），因此您可以将as道具设置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道具。 问题是它会显示警告：

警告：失败的道具类型： Dropdown道具children与道具冲突： selection 。 它们不能一起定义，选择其中之一。

如果需要，您可以使用 css 重新添加它。

Answer 2

看起来组件出于某种原因引发了 selectOnBlur 事件/处理程序，然后将值设置为下拉列表中的第一项。 一旦我将selectOnBlur字段设置为false我就设法让它正常工作。

固定示例： https : //codesandbox.io/s/semantic-ui-example-z4g9j