我無法關閉語義中的模態和調光器 - 使用反應

我試圖通過使用語義模態來獲得一個模態以關閉反應。出於某種原因，我可以將表格關閉，但調光器仍然存在。我需要幫助。（'。ui.modal'）。modal（'隱藏調光器'）和許多其他的東西。我無法關閉語義中的模態和調光器 - 使用反應

莫代爾是在這裏：

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

來源

2017-08-02 stevelacerda7

你應該通過 '開放' 託虛假您模式。你可以通過國家或通過道具來完成。例如：

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

來源

2017-08-02 22:57:56

謝謝，我不得不做出一對夫婦從你的代碼的調整，但是你讓我上正確的軌道，所以謝謝你從我的心底。那真讓我害怕。 – stevelacerda7

也許試試這個...

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

來源

2017-08-02 23:02:54

好了，我要發佈此，以防萬一有人被卡在同一個兔子洞，我在我不得不設置在模態中打開屬性，然後通過closeModal道具將其傳遞給我的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>

來源

2017-08-02 23:50:39 stevelacerda7

我無法關閉語義中的模態和調光器 - 使用反應

回答

相關問題