1

我正在尝试使用语义模态让模态在反应中关闭。出于某种原因，我可以关闭表单，但调光器仍然存在。我需要帮助。

我已经尝试过 $('.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>
      )
   }
}
4

3 回答 3

1

您应该将 'open' prop false 传递给您的模态。你可以通过 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>
      )
   }
}
于 2017-08-02T22:57:56.620 回答
1

也许试试这个...

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-02T23:02:54.950 回答
0

好的，我想发布这个，以防有人被困在我所在的同一个兔子洞里。我必须在模式中设置 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>
于 2017-08-02T23:50:39.433 回答