मेरे पास semantic-ui-react का उपयोग करके कुछ विकल्पों के साथ एक ड्रॉपडाउन है। मैं उपयोगकर्ता को ड्रॉपडाउन से चयन के बाद किए गए विकल्प पर एक संक्षिप्त विवरण दिखाने में सक्षम होना चाहता हूं। सिमेंटिक में एक <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
DJ2 22 फरवरी 2019, 19:05

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप प्रत्येक ड्रॉपडाउन विकल्प पर एक पॉपअप दिखाने का प्रयास कर रहे हैं, तो आप विकल्प प्रोप का उपयोग करने के बजाय ड्रॉपडाउन विकल्प बनाने के लिए उप-घटक API का उपयोग कर सकते हैं।

<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>

सिमेंटिक-यूआई-रिएक्ट साइट पर एक चेतावनी है जिसमें कहा गया है

उपघटक API का उपयोग करते समय ड्रॉपडाउन स्थिति पूरी तरह से प्रबंधित नहीं होती है। शॉर्टहैंड प्रॉप्स एपीआई पूरी तरह से राज्य का प्रबंधन करता है, लेकिन यहां दिखाए गए मार्कअप का समर्थन करने के लिए इसे विस्तारित करने की आवश्यकता है।

तो मैं इस सुझाव को नमक के अनाज के साथ ले जाऊंगा, लेकिन ऐसा लगता है कि आप जो खोज रहे हैं उसे पूरा करना प्रतीत होता है।

3
MEnf 22 फरवरी 2019, 16:23