如何显示下拉菜单语义UI

Question

我正在尝试使用语义UI制作一个下拉菜单，该菜单显示自身onclick但不知道如何显示。现在，当我单击时，我只是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。它还包含您可以使用的示例。