Reactjs 如何使用React JSX隐藏引导模式

我正在学习react，我想在“Post”回调后关闭引导模式

因此，在下面的代码中，当

onClick={（）=>postDocument.callApi（this.state.document，this.hideModal）}

回调时，我想在'hideModal'方法中隐藏模式

我该怎么做

import React, { Component } from "react";
import postDocument from "./../rest/PostDocument";
import fetchPersons from "./../rest/FetchPersons";
import PersonList from "./../components/PersonList";
import ShowDatePicker from "./../components/ShowDatePicker";
import moment from "moment";

class SaveDocument extends Component {
  state = {
    persons: [],
    document: {
      documentDate: moment(),
      personFrom: {
        id: ""
      },
      personTo: {
        id: ""
      },
      comments: ""
    }
  };

  hideModal = hideModalInfo => {
    // How do I hide the modal here!
  };

  render() {
    return (
      <div
        className="modal fade"
        id="basicExampleModal"
        tabIndex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">
                Save document
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div className="modal-footer">

              <button
                type="button"
                className="btn btn-primary"
                onClick={() => postDocument.callApi(this.state.document, this.hideModal)}
              >
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SaveDocument;

import React，{Component}来自“React”；
从“/./rest/postDocument”导入postDocument；
从“/./rest/fetchPersons”导入fetchPersons；
从“/./组件/PersonList”导入PersonList；
从“/。/components/ShowDatePicker”导入ShowDatePicker；
从“时刻”中导入时刻；
类SaveDocument扩展组件{
状态={
人员：[]，
文件：{
documentDate:矩（），
人员来源：{
id:“
},
个人：{
id:“
},
评论：“”
}
};
hideModal=hideModalInfo=>{
//我如何在这里隐藏模态！
};
render（）{
返回(
保存文档
&时代；
postDocument.callApi（this.state.document，this.hideModal）}
>
保存更改
);
}
}
导出默认保存文件；

您应该绑定该方法。onClick={this.handleClick}

class SaveDocument extends Component {

  constructor(props){
       super(props);
       state = { ... }
       //This binding is necessary to make `this` work in the callback
       this.hideModal = this.hideModal.bind(this);
  }

  render(){
     return (<button
            type="button"
            onClick={this.hideModal)}
          >)
  }

};

类SaveDocument扩展组件{
建造师（道具）{
超级（道具）；
状态={…}
//此绑定是使`This`在回调中工作所必需的
this.hideModal=this.hideModal.bind（this）；
}
render（）{
返回（）
}
};

此外，我还有一个基本的工作示例：

ReactModal.setAppElement（'#main'）；
类ExampleApp扩展了React.Component{
构造函数（）{
超级（）；
此.state={
showModal:错误
};
this.handleOpenModal=this.handleOpenModal.bind（this）；
this.handleCloseModal=this.handleCloseModal.bind（this）；
}
handleOpenModal（）{
this.setState（{showmodel:true}）；
}
handleCloseModal（）{
this.setState（{showmodel:false}）；
}
渲染（）{
返回(
触发模式
模态文本

闭合模态
);
}
}
const props={}；
ReactDOM.render（，document.getElementById（'main'））

在代码中（如果您有jquery）：

constructor（）{
this.state={hideModal=true}
}
hideModal（）{
this.state.hideModal=true
//我不推荐，我更喜欢使用状态
$（“#模态”）.hide（）
};
showModal（）{
this.state.hideModal=false
//我不推荐，我更喜欢使用状态
$（“#模态”）.show（）
};
render（）{
//div模式
}

bootstarp具有基于jquery的函数，因此

1.如果您在这里使用jquery，请使用这个

$("#basicExampleModal").modal("hide");

2.或者我们可以使用data dismission=“modal”来关闭该按钮

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

关闭

您可以导入jquery并调用引导的

模式（“隐藏”）

方法

import $ from "jquery";

...

hideModal = hideModalInfo => {
  $("#myModal").modal("hide");
};

---

但您使用的是ReactModal，对吗？？我使用的是基本引导。当它是引导模式时，有没有关闭它的方法？当您按下关闭按钮时，您必须更改状态，其中状态必须与样式或类显示关联：noneclose按钮已经与引导数据dismise=“modal”一起工作。我想在回调中关闭它；i、 jsx方法只需删除数据即可attribute@YasinMustafa请检查，我确实编辑了答案

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

import $ from "jquery";

...

hideModal = hideModalInfo => {
  $("#myModal").modal("hide");
};