如何显示下拉菜单语义 UI

Question

我正在尝试使用语义 UI 制作一个下拉菜单，它会在点击时自行显示，但不知道如何显示。现在当我点击时我只是 console.log "hi".

import React from "react";

class Dropdown extends React.Component {
  state = {};

  onClick = () => {
    console.log("hi");
  };

  render() {
    return (
      <div onClick={() => this.onClick()} class="ui selection dropdown">
        <input type="hidden" name="gender" />
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
          <div class="item" data-value="1">
            Male
          </div>
          <div class="item" data-value="0">
            Female
          </div>
        </div>
      </div>
    );
  }
}

export default Dropdown;

Answer 1

对于 React，您应该直接使用 semantic-ui-react 而不是 semantic-ui。

我不确定您是否已阅读该文档，但它可用 https://react.semantic-ui.com/modules/dropdown/#types-selection。它还包含您可以使用的示例。

如何显示下拉菜单语义 UI

How to Show Dropdown Menu Semantic UI

reactjs

semantic-ui