セマンティックモーダルを使用してモーダルとディマーを閉じることができません。

Question

モーダルをセマンティックモーダルを使用して反応させようとしています。何らかの理由で、フォームを閉じることができますが、調光器は残ります。私は助けが必要です。

私は$（ '。ui.modal'）。modal（ 'hide dimmer'）と他の多くのものを試しました。

モーダルはここにある：

export default class AddCamerModal extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
     <Modal 
      id="add-camera-form" 
      trigger={<Button id="color-0093ee border-color-0093ee" 
      basic 
      icon="video-camera" 
      size="large"></Button>} 
     > 
      <Header icon='cube' content='New Object' /> 
      <Modal.Content> 
       <AddCameraForm /> 
      </Modal.Content> 
     </Modal> 
    ) 
    } 

フォームはこちらです：

export default class AddCameraForm extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    closeModal() { 
     $('.modal').modal('hide'); 
    } 

    render() { 
     return (
     <Form size="large"> 
      <Form.Group widths="equal"> 
       <Form.Field label='Name' control='input' placeholder='Name' name="name" id="name" required /> 
      </Form.Group> 
      <Form.Group> 
       <Button type='submit' className="submit" onClick={this.handleSave}>Save</Button> 
       <Button type='deny' className="deny" onClick={this.closeModal}>Cancel</Button> 
      </Form.Group> 
     </Form> 
    ) 
    } 
} 

Answer 1

あなたのモーダルに偽支える 'オープン' 渡す必要があります。あなたは州や小道具を介してそれを行うことができます。たとえば：

export default class AddCamerModal extends React.Component { 
    constructor(props) { 
     super(props); 
     this.closeModal=this.closeModal.bind(this) 
     state={ isOpen: true } 
    } 

    closeModal() { 
     this.setState({isOpen: !this.state.isOpen}); 
    } 

    render() { 
     return (
     <Modal 
      open={this.props.open} 
      id="add-camera-form" 
      trigger={<Button id="color-0093ee border-color-0093ee" 
      basic 
      icon="video-camera" 
      size="large"></Button>} 
     > 
      <Header icon='cube' content='New Object' /> 
      <Modal.Content> 
       <AddCameraForm closeModal={this.closeModal} /> 
      </Modal.Content> 
     </Modal> 
    ) 
    } 
} 

export default class AddCameraForm extends React.Component { 
    constructor(props) { 
     super(props); 

    } 

    render() { 
     return (
     <div> 
     <Form size="large"> 
      <Form.Group widths="equal"> 
       <Form.Field label='Name' control='input' placeholder='Name' name="name" id="name" required /> 
      </Form.Group> 
      <Form.Group> 
       <Button type='submit' className="submit" onClick={this.handleSave}>Save</Button> 
       <Button type='deny' className="deny" onClick={this.props.closeModal}>Cancel</Button> 
      </Form.Group> 
     </Form> 
     </div> 
    ) 
    } 
} 

Answer 2

たぶん

export default class AddCamerModal extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      open: false 
     }; 
    } 

    render() { 
     return (
      <Modal 
       id="add-camera-form" 
       open={this.state.open} 
       onClose={e => this.setState({ open: false })} 
       trigger={ 
        <Button 
         id="color-0093ee border-color-0093ee" 
         basic 
         icon="video-camera" 
         size="large" 
         onClick={e => this.setState({ open: true })} 
        /> 
       } 
      > 
       <Header icon="cube" content="New Object" /> 
       <Modal.Content> 
        <AddCameraForm /> 
       </Modal.Content> 
      </Modal> 
     ); 
    } 
} 

Answer 3

わかりました...これを試してみてください、私は誰かが私がしていた同じウサギの穴にはまり念のためにこれを投稿したい私は設定する必要がありました。 open属性をモーダルに追加し、closeModalのpropを使用してAddCameraFormに渡します。ここで

はAddCameraModalです：

export default class AddCameraModal extends React.Component { 
    constructor(props) { 
     super(props); 

     this.openModal=this.openModal.bind(this); 
     this.closeModal=this.closeModal.bind(this); 

     this.state = { isOpen: false } 
    } 

    openModal() { 
     this.setState({isOpen: true}) 
    } 

    closeModal() { 
     this.setState({isOpen: false}); 
    } 

    render() { 
     return (
     <Modal 
      open={this.state.isOpen} 
      id="add-camera-form" 
      trigger={ 
       <Button id="color-0093ee border-color-0093ee" 
        basic 
        icon="video-camera" 
        size="large" onClick={this.openModal}> 
       </Button> 
      } 
     > 
      <Header icon='cube' content='New Object' /> 
      <Modal.Content> 
       <AddCameraForm closeModal={this.closeModal} openModal={this.openModal} /> 
      </Modal.Content> 
     </Modal> 
    ) 
    } 
} 

そして、ここでは私のAddCameraFormクラスからボタンのコードは次のとおりです。

<Button type='deny' className="cancel" onClick={this.props.closeModal}>Cancel</Button>