Dropdown

const menu = (
  <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
  </Menu>
);
const pic = (
  <div
    style={{
      width: 200,
      height: 100,
      lineHeight: "100px",
      textAlign: "center",
      background: "#ddd",
      color: "#555"
    }}
  >
    Click and Disappear
  </div>
);
ReactDOM.render(
  <div>
    <Dropdown
      trigger={<Button>hover me</Button>}
      onVisibleChange={console.log}
      triggerType={["hover"]}
      afterOpen={() => console.log("after open")}
    >
      {menu}
    </Dropdown>
    &nbsp;&nbsp;
    <Dropdown
      autoClose
      trigger={<Button>click me</Button>}
      onVisibleChange={console.log}
      triggerType={["click"]}
      afterOpen={() => console.log("after open")}
    >
      {pic}
    </Dropdown>
  </div>,
  mountNode
);

const menu = (
  <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
  </Menu>
);
ReactDOM.render(
  <Dropdown trigger={<a>Click me</a>} triggerType="click">
    {menu}
  </Dropdown>,
  mountNode
);

const menu = (
  <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
  </Menu>
);
class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      visible: false
    };
    this.toggleVisible = () => {
      this.setState({
        visible: !this.state.visible
      });
    };
    this.onVisibleChange = visible => {
      this.setState({
        visible
      });
    };
  }
  render() {
    return (
      <div>
        <div style={{ marginBottom: "20px" }}>
          <Button onClick={this.toggleVisible} ref="button">
            Toggle Overlay
          </Button>
        </div>
        <Dropdown
          trigger={<span>Hello dropdown</span>}
          triggerType="click"
          visible={this.state.visible}
          onVisibleChange={this.onVisibleChange}
          safeNode={() => this.refs.button}
        >
          {menu}
        </Dropdown>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

const menu = (
  <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
  </Menu>
);
ReactDOM.render(
  <div>
    <Dropdown
      trigger={<button>Hello dropdown</button>}
      triggerType={["click", "hover"]}
      afterOpen={() => console.log("after open")}
    >
      {menu}
    </Dropdown>
  </div>,
  mountNode
);