Je ne peux pas fermer le modal et le dimmer en sémantique - en utilisant la réaction

Question

J'essaye de faire réagir un modal en utilisant le modal sémantique. Pour une raison quelconque, je peux obtenir la forme de fermer, mais le gradateur reste. J'ai besoin d'aide.

J'ai essayé $ ('.ui.modal'). Modal ('cache dimmer') et beaucoup d'autres choses.

Modal est ici:

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

La forme est ici:

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

Vous devez passer 'ouvert' prop faux à votre modal. Vous pouvez le faire via l'état ou via des accessoires. Par exemple:.

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

Peut-être essayer ça ...

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

D'accord, je veux poster ce juste au cas où quelqu'un se coince dans le même trou de lapin j'étais je devais régler la Ouvrez l'attribut dans le modal, puis transmettez-le à mon AddCameraForm via le prop closeModal.

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

Et voici le code du bouton de ma classe AddCameraForm:

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