我无法关闭语义中的模态和调光器 - 使用反应

我试图通过使用语义模态来获得一个模态以关闭反应。出于某种原因，我可以将表格关闭，但调光器仍然存在。我需要帮助。（'。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

我无法关闭语义中的模态和调光器 - 使用反应

回答

相关问题