2017-12-31 102 views
0

Ich habe ein Dropdown und ein Modal, und ich möchte das Modal zeigen, wenn eines der Dropdown-Element geklickt wird. Ist es möglich? Ich konnte keinen Weg finden, dies zu tun, da ich das Ziel DropDropItem, das von Modals Trigger-Requisiten benötigt wird, nicht erreichen kann.Wie kann man ein Modal auslösen, wenn man in Semantic UI React auf ein Dropdown-Element klickt?

export class Demo extends React.Component<{}, {}> { 
    private options = [ 
    { text: 'doNothing', value: 'doNothing' }, 
    { text: 'openModal', value: 'openModal' }, 
    ] 
    render() { 
    return (
     <div> 
     <Dropdown 
      fluid 
      selection 
      options={this.options} 
      defaultValue={this.options[0].value} /> 

     <Modal trigger={<Button>trigger</Button>}> 
      <Modal.Header>Select a Photo</Modal.Header> 
      <Modal.Content image> 
      <Modal.Description> 
       <p>Some contents.</p> 
      </Modal.Description> 
      </Modal.Content> 
     </Modal> 
     </div> 
    ) 
    } 
} 

Antwort

2

könnten Sie prop open von Modal programmatisch zu kontrollieren. Wenn Sie feststellen, dass der gewünschte Dropdown Artikel wurde setState entsprechend geklickt.

Etwas unter diesen Zeilen.

import * as React from 'react'; 

export class Demo extends React.Component<{}, {}> { 
    state = { 
    options: [ 
     { text: 'doNothing', value: 'doNothing' }, 
     { text: 'openModal', value: 'openModal' } 
    ], 
    open: false 
    }; 

    onClose =() => this.setState({open: false}); 
    onChange = (selected) => { 
    // if the correct one is selected then... 
    // this.setState({open: true}); 
    } 

    render() { 
    return (
     <div> 
     <Dropdown 
      fluid 
      selection 
      options={this.options} 
      onChange={this.onChange} 
      defaultValue={this.options[0].value} /> 

     <Modal open={this.state.open} onClose={this.onClose}> 
      <Modal.Header>Select a Photo</Modal.Header> 
      <Modal.Content image> 
      <Modal.Description> 
       <p>Some contents.</p> 
      </Modal.Description> 
      </Modal.Content> 
     </Modal> 
     </div> 
    ) 
    } 
} 
+0

Tolle Idee, es hat funktioniert, danke! – Searene

Verwandte Themen