代码之家 › 专栏 › 技术社区 › stevenlacerda

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

semantic-ui-react semantic-ui reactjs

stevenlacerda · 技术社区 · 9 年前

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

3 回复 | 直到 9 年前

Alex Borodin 9 年前

你应该把“open”prop false传递给你的modal。你可以通过状态或道具来实现。例如:

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

canaan seaton 9 年前

也许试试这个。。。

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

stevenlacerda 9 年前

以下是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>
      )
   }
}

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