Я не могу закрыть модальный и диммер в семантике - используя реакцию

Я пытаюсь заставить модальное закрываться в ответ, используя семантический модальный. По какой-то причине я могу закрыть форму, но диммер остается. Мне нужна помощь.

Я пробовал $('.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>
      )
   }
}

reactjs semantic-ui-react semantic-ui
person stevenlacerda    schedule 02.08.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы должны передать 'open' prop false своему модальному модулю. Вы можете сделать это через состояние или через реквизит. Например:

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>
      )
   }
}
person Alex Borodin    schedule 02.08.2017
comment
Спасибо, мне пришлось внести пару поправок в ваш код, но вы навели меня на правильный путь, так что спасибо вам от всего сердца. Это убивало меня. - person stevenlacerda; 03.08.2017

arrow_upward
1
arrow_downward

Может быть, попробовать это...

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>
        );
    }
}
person canaan seaton    schedule 02.08.2017

arrow_upward
0
arrow_downward

Хорошо, я хочу опубликовать это на случай, если кто-то застрянет в той же кроличьей норе, в которой был я. Мне пришлось установить атрибут open в модальном окне, а затем передать его в мою форму AddCameraForm через реквизит closeModal.

Вот 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>
person stevenlacerda    schedule 02.08.2017