使用 jquery 以编程方式关闭 react-redux 中的引导模式答案

【问题标题】：close bootstrap modal in react-redux programmatically using jquery使用 jquery 以编程方式关闭 react-redux 中的引导模式
【发布时间】：2018-09-26 11:25:03
【问题描述】：

相信我们都做得很好...我目前正在构建一个也使用 redux 的反应应用程序，我在尝试以编程方式关闭 bootstarp 中的模式时遇到问题，我正在使用 bootstrap 4，和 jquery 3.3.1...我试过这个：

 onSubmit(event) {
   event.preventDefault();
    this.props.editBusinessAction(this.props.id, this.state)
      .then((message) => {
        $('#modal').modal(hide)
      toastrOption();
      toastr.success(message);
   })
  .catch((message) => {
    toastrOption();
    toastr.error(message);
    console.log(message);
  });

}

【问题讨论】：

你需要在hide中加''，像这样$('#modal').modal('hide')

标签： javascript jquery node.js reactjs redux

【解决方案1】：

$('#modal').modal('hide') 仅当您在入口组件中导入 jquery 和 bootstrap 时才有效。

在您的起始组件中安装 jquery 和引导程序并导入 jquery，例如：App.js 如下所示

npm install -s jquery@2.2.3 bootstrap@3.3.6

App.js

import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
export default class extends Component {
    render(){
      return (
         <div>App component</App>
      )
    }
}

【讨论】：

【解决方案2】：

尝试将hide 放在这样的引号中：

 onSubmit(event) {
   event.preventDefault();
    this.props.editBusinessAction(this.props.id, this.state)
      .then((message) => {
        $('#modal').modal('hide')
      toastrOption();
      toastr.success(message);
   })
  .catch((message) => {
    toastrOption();
    toastr.error(message);
    console.log(message);
  });

}

【讨论】：