React-Redux中如何通过jQuery程序化关闭Bootstrap 4模态框

Hey there! Let's break down why your Bootstrap modal isn't closing when you want it to, and fix it step by step.

First: Fix the jQuery Syntax Error #

Looking at your code, the immediate issue is a small syntax mistake in how you're calling Bootstrap's modal method:

// ❌ Wrong - `hide` is treated as an undefined variable
$('#modal').modal(hide)

// ✅ Correct - pass 'hide' as a string argument
$('#modal').modal('hide')

Bootstrap's modal() method expects string commands like 'hide', 'show', or 'toggle' wrapped in quotes. Without quotes, JavaScript will look for a variable named hide (which doesn't exist here), so the method won't run as expected.

Verify Your Modal's ID #

Double-check that your modal element actually has the ID modal. If there's a typo, or if multiple elements share the same ID, jQuery won't target the right modal. You can debug this quickly by adding a console log before the modal call:

console.log($('#modal')); // Should return a jQuery object with your modal element

If this logs an empty object, you need to fix the ID matching between your JS and HTML.

Better: Avoid Direct DOM Manipulation in React #

Since you're using React, directly using jQuery to manipulate the DOM can lead to conflicts with React's virtual DOM over time. A more React-friendly approach is to control the modal's visibility with component state:

1. Add a state variable to track the modal's open/closed status:

constructor(props) {
  super(props);
  this.state = {
    isModalOpen: true, // Match your initial modal state
    // ... your other state variables
  };
}

2. Update your modal's HTML to use this state. For vanilla Bootstrap, toggle the show class and visibility styles:

<div 
  className={`modal fade ${this.state.isModalOpen ? 'show' : ''}`}
  style={{ display: this.state.isModalOpen ? 'block' : 'none' }}
  aria-hidden={!this.state.isModalOpen}
>
  {/* Modal content here */}
</div>

3. Instead of calling jQuery, just update the state when your action succeeds:

.then((message) => {
  this.setState({ isModalOpen: false });
  toastrOption();
  toastr.success(message);
})

Even better: Use react-bootstrap (the official Bootstrap component library for React) which handles state management out of the box. You can control the modal directly with the show prop:

import { Modal } from 'react-bootstrap';

// In your render method
<Modal show={this.state.isModalOpen} onHide={() => this.setState({ isModalOpen: false })}>
  {/* Modal content */}
  <Modal.Footer>
    <button onClick={this.onSubmit}>Save Changes</button>
  </Modal.Footer>
</Modal>

Prevent Memory Leaks in Async Actions #

Since your editBusinessAction is asynchronous, make sure your component is still mounted before updating state or manipulating the DOM. Add a flag to track mount status:

componentDidMount() {
  this.isMounted = true;
}

componentWillUnmount() {
  this.isMounted = false;
}

// Then in your submit handler:
onSubmit(event) { 
  event.preventDefault(); 
  this.props.editBusinessAction(this.props.id, this.state) 
    .then((message) => { 
      if (this.isMounted) {
        $('#modal').modal('hide'); // Or update state if using React-controlled modal
        toastrOption(); 
        toastr.success(message); 
      }
    }) 
    .catch((message) => { 
      if (this.isMounted) {
        toastrOption(); 
        toastr.error(message); 
        console.log(message);
      }
    });
}

内容的提问来源于stack exchange，提问作者Clint Fidel