javascript - 语义 UI react - 在下拉选择上实现弹出窗口

Question

我有一个包含一些选项的下拉菜单，使用 semantic-ui-react 。我希望能够向用户展示从下拉列表中选择后所做选择的简短描述。语义也有 <Popup/> 我一直在尝试与 <Dropdown/> 一起使用的模块使这项工作成功。

我正在查看下拉模块的 Prop 列表，但没有看到任何特别适合我的情况的内容。我尝试过在弹出窗口内使用下拉菜单，但没有成功。

沙盒示例:https://codesandbox.io/s/5zo52qyrxk

import React from "react";
import ReactDOM from "react-dom";
import { Dropdown, Popup, Input } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

import "./styles.css";

const offsetOptions = [
  {
    text: "fromEarliest",
    value: "fromEarliest"
  },
  {
    text: "fromLatest",
    value: "fromLatest"
  }
];

const DropdownExample = () => (
  <Dropdown
    placeholder="Select offset position"
    clearable
    fluid
    selection
    options={offsetOptions}
    header=" Something about offset "
  />
);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      offset: ""
    };
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <fieldset>
            <h1> Implement Popup on this Dropdown - semantic ui </h1>
            <DropdownExample />
          </fieldset>
        </div>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

如果您尝试在每个下拉选项上显示弹出窗口，则可以使用子组件 API 来创建下拉选项，而不是使用 options 属性。

<Dropdown text='File'>
  <Dropdown.Menu>
    <Popup trigger={<Dropdown.Item text='Close' description="Close" value="Close" />} content="Hello there" />
    <Popup trigger={<Dropdown.Item text='Open' description='Open' value="Open" />} content="Open me"/>
    {/* more options would go here... */}
  </Dropdown.Menu>
</Dropdown>

Semantic-UI-React 网站上有一条警告，指出

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

所以我对这个建议持保留态度，但它似乎确实实现了您正在寻找的目标。