在关闭反应时清除模式的特定内容答案

【问题标题】：clearing particular contents of a modal upon closing in react在关闭反应时清除模式的特定内容
【发布时间】：2019-07-29 00:13:12
【问题描述】：

我正在使用引导类在反应组件中调用模态，其中模态主体的右侧有 axios 调用，我想在单击关闭按钮或“X”按钮时清除模态的右侧所以那下一个Popup右边又会是空的，有可能吗？？如果是，不确定如何准确地完成，因为有内置的引导类。

triggerHandler(){
axios.post(`http://localhost:8200/playit`)
  .then( response=>{
    console.log(response.data)
    this.setState({
        value:response.data
    })
  })
 }
render(){
let value = this.state.value
return(
  <div>
    <div className="modal fade bd-example-modal-lg" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div className="modal-dialog modal-lg" role="document">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title" id="exampleModalLabel">Response and Trigger</h5>
            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            <div className="row">
              <div className="col-lg-6">
              {
                Hello
              }
              </div>
              <div className="col-lg-6">
                {value}
                <button className="btn btn-primary" onClick={()=>this.triggerHandler()}>Trigger</button>
              </div>
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
 );
}

如上所述，当我在“X”按钮上单击关闭时收到响应后，右侧应在关闭时变为空。

【问题讨论】：

您要清除服务器上的数据吗？
No No，只有字段，这样当我关闭并再次单击按钮时，右侧应该为空，提示用户单击触发按钮以显示结果。
向关闭按钮添加一个函数，并在函数内部将值更改为空 onClose = () => {this.setState({value:""})}
@ReNinja - 哦，是的，没想到，谢谢。

标签： reactjs bootstrap-4 bootstrap-modal

【解决方案1】：

 onCloseModal = () => {
          this.setState({value:""})
        }

<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={()=>this.onCloseModal()}>Close</button>

在按钮上添加一个 onCloseModal 函数，将值设置为空字符串。

【讨论】：