2017-12-31 27 views
0

私はドロップダウンとモーダルを持っており、ドロップダウンアイテムの1つがクリックされたときにモーダルを表示したいと思います。出来ますか? Modalのトリガー・プロップで必要とされるターゲットDropdownItemを取得できないため、方法を見つけることができませんでした。あなたがプログラム的にそれを制御するための小道具openModalのを使用することができSemantic UI Reactでドロップダウンアイテムをクリックしたときにモーダルをトリガする方法は?

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

答えて

2

。目的のDropdownアイテムがsetStateを適切にクリックしたことを検出したとき。

これらの行の何か。

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

素晴らしいアイデアは、感謝しました! – Searene

関連する問題