我不能在语义使用react中关闭模式和调光器

Question

我正在尝试使用语义模态来关闭react中的模态。由于某种原因，我可以让窗体关闭，但调光器仍然存在。我需要帮助。

我尝试过$(‘.ui.modal’)、.modal(‘hide dimmer')和许多其他东西。

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

Answer 1

你应该将'open‘prop false传递给你的modal。你可以通过state或者props来实现。例如：

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属性将其传递给我的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>