Semantic UI React에서 드롭 다운 항목을 클릭 할 때 모달을 트리거하는 방법은 무엇입니까?

Question

나는 드롭 다운과 모달을 가지고 있으며 드롭 다운 항목 중 하나를 클릭했을 때 모달을 보여주고 싶습니다. 가능한가? 모달의 트리거 소품에 필요한 대상 DropdownItem을 얻을 수 없기 때문에 이렇게 할 수있는 방법을 찾지 못했습니다.

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

Answer 1

당신은 프로그래밍 방식으로 제어하는 ​​소품 openModal의를 사용할 수 있습니다. 원하는 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> 
    ) 
    } 
}