Reactjs 我不能在语义上关闭模态和调光器

我试着用语义模态来结束反应。出于某种原因，我可以让窗体关闭，但调光器仍然存在。我需要帮助

我尝试过$（'.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>
      )
   }

导出默认类addCamerMoal扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}

表格如下：

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

导出默认类AddCameraForm扩展React.Component{
建造师（道具）{
超级（道具）；
}
closeModal（）{
$（'.modal'）.modal（'hide'）；
}
render（）{
返回(
拯救
取消
)
}
}

您应该将'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>
      )
   }
}

导出默认类addCamerMoal扩展React.Component{
建造师（道具）{
超级（道具）；
this.closeModal=this.closeModal.bind（this）
状态={isOpen:true}
}
closeModal（）{
this.setState（{isOpen:！this.state.isOpen}）；
}
render（）{
返回(
)
}
}
导出默认类AddCameraForm扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
拯救
取消
)
}
}

也许可以试试这个

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

导出默认类addCamerMoal扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
};
}
render（）{
返回(
this.setState（{open:false}）
触发={
this.setState（{open:true}）}
/>
}
>
);
}
}

好的，我想把这篇文章发出去，以防有人被困在我刚才所在的兔子洞里。我必须在模式中设置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>
      )
   }
}

导出默认类AddCameraModal扩展React.Component{
建造师（道具）{
超级（道具）；
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（）{
返回(
)
}
}

下面是我的AddCameraForm类中的按钮代码：

<Button type='deny' className="cancel" onClick={this.props.closeModal}>Cancel</Button>

取消

谢谢，我不得不对你的代码进行一些调整，但你让我走上了正确的道路，所以我衷心感谢你。那简直要了我的命。