React中的语义UI下拉菜单：[ is used as content

Question

我正在尝试替换语义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

[当您尝试在下拉列表中选择第二，第三，...选项时发生错误-注意，控制台窗口两次显示onChange输入事件。

编辑：

忘记提及两件重要的事情：

• 仅在加载下拉列表且没有任何内容时发生已选择
• 用户必须单击文本（即超链接）本身才能出现

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}
      />
    ))}
  </Dropdown.Menu>
</Dropdown>

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

---

请注意，在他们的示例中，下拉菜单没有边框。如果需要该边框，则可以添加selection属性。问题是它将显示警告：

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

如果需要，您可以使用CSS将其重新添加。