javascript - Modal element is not hiding [React & React - Bootstrap] - Stack Overflow

admin管理员组

文章数量:1022712

I've created modal with React Bootstrap. Despite the fact, that I'm using onHide function, nothing happens. Here's my modal:

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

I'm passing "show" from other ponent, when click occurs on some element. onClick on that element is specified to: "showModal: true". Then I'm passing showModal to other ponent that is rendering different elements according to option choosed:

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

At last in MyForm ponent I have function that passes props to ponent with modal:

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

So, this is the way "show" is going. In my file with modal ponent I have function for handling hide:

handleHide() {
    this.setState({ showModal: false });
}

Now in this ponent showModal is initialize in state like so:

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

    this.handleHide = this.handleHide.bind(this);
}

I've tried many things. Other state variables, without initializing showModal in state and many more. When clicking on the button or beyond the modal, modal is still visible and not hiding. I will be very grateful for your help and/or suggestions how to fix this.

So, the way showModal is going: parent ponent (where this.state.addingState is happening) -> MyForm ponent (where let modalComponentProps= { show: this.props.show, ... happens) -> actual modal ponent

Code on CodePen

I've created modal with React Bootstrap. Despite the fact, that I'm using onHide function, nothing happens. Here's my modal:

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

I'm passing "show" from other ponent, when click occurs on some element. onClick on that element is specified to: "showModal: true". Then I'm passing showModal to other ponent that is rendering different elements according to option choosed:

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

At last in MyForm ponent I have function that passes props to ponent with modal:

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

So, this is the way "show" is going. In my file with modal ponent I have function for handling hide:

handleHide() {
    this.setState({ showModal: false });
}

Now in this ponent showModal is initialize in state like so:

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

    this.handleHide = this.handleHide.bind(this);
}

I've tried many things. Other state variables, without initializing showModal in state and many more. When clicking on the button or beyond the modal, modal is still visible and not hiding. I will be very grateful for your help and/or suggestions how to fix this.

So, the way showModal is going: parent ponent (where this.state.addingState is happening) -> MyForm ponent (where let modalComponentProps= { show: this.props.show, ... happens) -> actual modal ponent

Code on CodePen

• javascript
• html
• reactjs
• redux
• react-bootstrap

Share Improve this question Follow edited Dec 20, 2018 at 21:26 adrian95999 asked Dec 16, 2018 at 2:08 adrian95999adrian95999 11511 gold badge33 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

you have 2 possibilities: you can add the method to your parent and pass the method + the result of show like this (use same name of props and method for best practice, so you will be not confuse):

Parent

<Modal
    {...this.props}
    bsSize="large"
    aria-labelledby="contained-modal-title-lg"
    show={this.state.showModal}
    handleHide={this.handleHide}
  >

Child

   <MyForm
        show={this.props.showModal}
        handleHide={this.props.handleHide}
    />

To use the modal from parent, you can call it like this in child: this.props.handleHide(true).

Or you let the child manage the state by itself, so you would place the method and state in child, not in parent (depending on the architecture).

It is not remended to add the props in child state. Also, you could use es6 function to avoid binding like this:

handleHide = () => this.setState({ showModal: false });

Look on the shouldComponentUpdate method

shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
}

You are checking only props but you are changing the state of the ponent. Fix the method or remove it and it will be working

I've created modal with React Bootstrap. Despite the fact, that I'm using onHide function, nothing happens. Here's my modal:

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

I'm passing "show" from other ponent, when click occurs on some element. onClick on that element is specified to: "showModal: true". Then I'm passing showModal to other ponent that is rendering different elements according to option choosed:

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

At last in MyForm ponent I have function that passes props to ponent with modal:

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

So, this is the way "show" is going. In my file with modal ponent I have function for handling hide:

handleHide() {
    this.setState({ showModal: false });
}

Now in this ponent showModal is initialize in state like so:

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

    this.handleHide = this.handleHide.bind(this);
}

I've tried many things. Other state variables, without initializing showModal in state and many more. When clicking on the button or beyond the modal, modal is still visible and not hiding. I will be very grateful for your help and/or suggestions how to fix this.

So, the way showModal is going: parent ponent (where this.state.addingState is happening) -> MyForm ponent (where let modalComponentProps= { show: this.props.show, ... happens) -> actual modal ponent

Code on CodePen

I've created modal with React Bootstrap. Despite the fact, that I'm using onHide function, nothing happens. Here's my modal:

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

I'm passing "show" from other ponent, when click occurs on some element. onClick on that element is specified to: "showModal: true". Then I'm passing showModal to other ponent that is rendering different elements according to option choosed:

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

At last in MyForm ponent I have function that passes props to ponent with modal:

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

So, this is the way "show" is going. In my file with modal ponent I have function for handling hide:

handleHide() {
    this.setState({ showModal: false });
}

Now in this ponent showModal is initialize in state like so:

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

    this.handleHide = this.handleHide.bind(this);
}

I've tried many things. Other state variables, without initializing showModal in state and many more. When clicking on the button or beyond the modal, modal is still visible and not hiding. I will be very grateful for your help and/or suggestions how to fix this.

So, the way showModal is going: parent ponent (where this.state.addingState is happening) -> MyForm ponent (where let modalComponentProps= { show: this.props.show, ... happens) -> actual modal ponent

Code on CodePen

• javascript
• html
• reactjs
• redux
• react-bootstrap

Share Improve this question Follow edited Dec 20, 2018 at 21:26 adrian95999 asked Dec 16, 2018 at 2:08 adrian95999adrian95999 11511 gold badge33 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

you have 2 possibilities: you can add the method to your parent and pass the method + the result of show like this (use same name of props and method for best practice, so you will be not confuse):

Parent

<Modal
    {...this.props}
    bsSize="large"
    aria-labelledby="contained-modal-title-lg"
    show={this.state.showModal}
    handleHide={this.handleHide}
  >

Child

   <MyForm
        show={this.props.showModal}
        handleHide={this.props.handleHide}
    />

To use the modal from parent, you can call it like this in child: this.props.handleHide(true).

Or you let the child manage the state by itself, so you would place the method and state in child, not in parent (depending on the architecture).

It is not remended to add the props in child state. Also, you could use es6 function to avoid binding like this:

handleHide = () => this.setState({ showModal: false });

Look on the shouldComponentUpdate method

shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
}

You are checking only props but you are changing the state of the ponent. Fix the method or remove it and it will be working

本文标签： javascriptModal element is not hiding React amp ReactBootstrapStack Overflow