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

Question

我正在尝试替换语义 UI 下拉项的内容以包含 <a href="" /> links，它们的默认行为（重定向到 link）将被禁用。简单地说，<a href="" /> 应该出现在 DOM 中，但它的默认行为应该被阻止。

我遇到了一个问题，如果我将 <a href="..." /> 作为下拉项的内容，然后尝试 select 一些选项（第一个除外），onChange 事件被触发两次，第一次出现是预期的，第二次总是指下拉列表中的第一项。最后，下拉列表的第一个 selection 总是 select 是第一个下拉项。

代码示例可以在这里找到：https://codesandbox.io/s/semantic-ui-example-s6vz1?fontsize=14&hidenavigation=1&module=%2Fexample.js&theme=dark

当您尝试 select 下拉列表中的第 2、第 3、... 选项时发生错误 - 请注意控制台 window 显示 onChange 条目事件两次。

编辑：

忘了提两件重要的事情：

它只发生在下拉列表加载并且没有任何内容时 select编辑
用户必须自己单击文本（即在 hyperlink 上）才能发生

Answer 1

您可以自己生成选项（就像在他们的 first example 中一样），因此您可以将 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 属性。问题是它会显示警告：

Warning: Failed prop type: Prop children in Dropdown conflicts with props: selection. They cannot be defined together, choose one or the other.

如果需要，您可能可以使用 css 添加回来。

Answer 2

看起来组件出于某种原因引发了 selectOnBlur event/handler，然后将值设置为下拉列表中的第一项。将 selectOnBlur 字段设置为 false.

后，我设法使其正常工作

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

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

Semantic UI Dropdown in React: onChange triggered twice when <a href> is used as content

javascript

reactjs

semantic-ui

semantic-ui-react