javascript - How to close semantic ui modal in another react component? - Stack Overflow

admin管理员组

文章数量:1287490

In my main ponent I can open a modal by clicking on an icon. The content of the modal is a separate ponent, which is calling a method. If the method call is successful, I want to close the modal. But how can I do this?

Main ponent

class Example extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <div>
                <Modal trigger={ <Icon name='tags' /> } >
                    <Modal.Header>
                        <div>
                            <Header floated='left'>Title</Header>
                            <Button floated='right'>A Button</Button>
                        </div>
                    </Modal.Header>
                    <Modal.Content>

                        <ModalContent />

                    </Modal.Content>
                </Modal>
            </div>
        )
    }
}

Modal content

class ModalContent extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    handleClick() {
        method.call(
            { param },
            (error, result) => {
                if (result) {
                    // Now close the modal
                }
            }
        );
    }

    render() {
        return (
            <Button onClick={this.handleClick} content='Save' />
        )
    }
}

In my main ponent I can open a modal by clicking on an icon. The content of the modal is a separate ponent, which is calling a method. If the method call is successful, I want to close the modal. But how can I do this?

Main ponent

class Example extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <div>
                <Modal trigger={ <Icon name='tags' /> } >
                    <Modal.Header>
                        <div>
                            <Header floated='left'>Title</Header>
                            <Button floated='right'>A Button</Button>
                        </div>
                    </Modal.Header>
                    <Modal.Content>

                        <ModalContent />

                    </Modal.Content>
                </Modal>
            </div>
        )
    }
}

Modal content

class ModalContent extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    handleClick() {
        method.call(
            { param },
            (error, result) => {
                if (result) {
                    // Now close the modal
                }
            }
        );
    }

    render() {
        return (
            <Button onClick={this.handleClick} content='Save' />
        )
    }
}

• javascript
• reactjs
• semantic-ui
• semantic-ui-react

Share Improve this question Follow edited Apr 29, 2017 at 15:58 Cœur 38.7k2626 gold badges203203 silver badges277277 bronze badges asked Feb 21, 2017 at 11:41 user3142695user3142695 17.4k5555 gold badges194194 silver badges375375 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You should add an onClose property to <Modal> element. See example below:

<Modal
    trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
    open={this.state.modalOpen}
    onClose={this.handleClose}
  >

Then you can add onClose function to a button in your modal. Full example from the docs: https://react.semantic-ui./modules/modal#modal-example-controlled

Pass a onSuccess method as a props :

in the parent :

 <ModalContent onSuccess={this.onModalSuccess}/>

in the child ponent :

handleClick() {
   method.call(
        { param },
        (error, result) => {
            if (result) {
                this.props.onSuccess()
            }
        }
    );
}

In this way you keep your open/close logic in the parent ponent.

semantic-ui have property open. Just set true or false

class Example extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
  }
  open = () => this.setState({ open: true })
  close = () => this.setState({ open: false })
  render() {
    return (
        <div>
            <Modal open={this.state.open} trigger={ <Icon name='tags' /> } >
                <Modal.Header>
                    <div>
                        <Header floated='left'>Title</Header>
                        <Button floated='right'>A Button</Button>
                    </div>
                </Modal.Header>
                <Modal.Content>

                    <ModalContent />

                </Modal.Content>
            </Modal>
        </div>
    )
  }
}

本文标签： javascriptHow to close semantic ui modal in another react componentStack Overflow