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创建下拉选项，而不使用选项prop。

hive > SET hive.support.sql11.reserved.keywords=false 
> create view temp as SELECT hour,id,regexp_replace(text,'\n','') as text FROM proj_tweets_2 
> ROW FORMAT SERDE 'org.apache.hive.hcatalog.data.JsonSerDe' STORED AS TEXTFILE;

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

使用子组件API时，无法完全管理
下降状态。简易道具API可以完全管理状态，但需要扩展以支持此处显示的标记。

因此，我会建议一下，但似乎确实可以满足您的需求。

Answer 2

这是一个解决方案，它允许您使用 <Popup/> inside <Dropdown.Item/>，同时仍然使用诸如 options、value 之类的速记道具和onChange：

// Main component
const DropdownWithPopups = ({ className, options, value, onChange, ...props }) => {
  return (
    <Dropdown
      className='dropdown-with-popups'
      selection
      options={options}
      value={value}
      onChange={onChange}
      {...props}
    />
  );
};

// Popup that will be inside the default <Item/>
const ItemPopup = ({ text, popupContent }) => {
  return (
    <Popup
      basic
      position='left center'
      hoverable
      pinned
      trigger={(
        <div className='item-popup-trigger'>
          {text}
        </div>
      )}
      content={(
        <div className='item-popup-content'>
          {popupContent}
        </div>
      )}
      popperModifiers={{
        preventOverflow: {
          boundariesElement: 'window',
        },
      }}
    />
  );
};

// What your options should look like
const getOptions = (optionsData) => {
  return _.map(optionsData, (option) => {
    return {
      value: option.value,
      // `text` so the selected option is displayed
      text: option.text,
      // `children`is incompatible with `text` prop, so Semantic UI React will throw a warning,
      // but it works as expected
      children: (
        <ItemPopup
          text={option.text}
          // whatever you need to render inside your Popup
          popupContent={...}
        />
      ),
    };
  });
};

不过我只在旧版本的 semantic-ui-react (v0.88.2) 上测试过

Answer 3

实际上还有另一种方法可以在数据映射期间使用附加参数 content 来呈现带有弹出窗口的下拉项

例如，您有一些收到的 data 放在下拉列表中，那么 options 的地图将是：

const options = data.map(elem => ({
    key: elem.id,
    text: elem.name,
    value: elem.name,
    content: (
        <Popup
            content={ elem.example }
            trigger={ <div>{ elem.name }</div> } />
    ),
})

this.setState({
    dropdown: {
        options: options
    }
})

然后将 options 作为 <Dropdown /> 参数传递：

<Dropdown
    fluid
    selection
    placeholder="Data"
    options={ this.state.dropdown.options }
    value={ this.state.dropdown.selected } />

语义UI反应-在下拉菜单中实现弹出菜单

3 个答案: