Semantic UI реагирует - реализовать всплывающее окно при выборе выпадающего - PullRequest
Новая
       8

Semantic UI реагирует - реализовать всплывающее окно при выборе выпадающего

0 голосов
/ 22 февраля 2019

У меня есть выпадающий список с несколькими опциями, используя semantic-ui-react.Я хочу показать пользователю краткое описание выбора, который он сделал после выбора из выпадающего списка.В Semantic также есть модуль <Popup/>, который я пытался использовать вместе с <Dropdown/>, чтобы сделать эту работу.

Я просматриваюПропиши список выпадающего модуля и не увидишь ничего конкретного, что подходит для моего случая.Я пытался использовать раскрывающийся список внутри всплывающего окна, но безуспешно.

Песочница с примером: 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);

1 Ответ

0 голосов
/ 22 февраля 2019

Если вы пытаетесь отобразить всплывающее окно для каждого параметра раскрывающегося списка, то вы можете использовать субкомпонентный API для создания параметров раскрывающегося списка, а не использовать опцию prop. 

<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 с состояниями

не полностью управляется при использовании субкомпонентного API.Сокращенный API props полностью управляет состоянием, но его необходимо расширить для поддержки разметки, показанной здесь.

Так что я бы принял это предложение с небольшим количеством соли, но, похоже, оно выполнит то, что выищу.

...