如何刪除React-bootstrap彈出窗口onClick？

Question

我正在渲染一個表內彈窗，這是由另一個React類中的事件觸發的。

表格被正確呈現並顯示。然而，我確實希望用戶能夠通過popover中的按鈕再次將其刪除。

我想我在正確的道路上，但現在，用戶單擊按鈕時沒有任何反應。它將以假爲開始，當它被渲染時，返回true;但我如何隱藏popover？

示例代碼：

let Sample = React.createClass({ 

    getInitialState : function() { 
     return{ 
      showTable: false, 
      data: [], 
      selectedOption: this.selectedOption, 
     }; 
    }, 

    onClick: function() { 
     this.setState({ showTable: false }); 
    }, 

    loadAjax : function // An ajax call 
     // In here we will do --> this.setState({ showTable: true }); 

    renderTable // Table content rendered here 

    render : function() { 

     let tableData = this.state.data; 

     if (tableData && this.state.selectedOption) { 
      return (
       <Popover className="styling-table" 
         id="popover-trigger-focus" 
         title={this.state.selectedOption} 
         ref="popover"> 
        <Button onClick={this.onClick} /> 
        <Table striped bordered condensed hover> 
         <thead> 
         <tr> 
          <th>Header 1</th> 
          <th>Header 2</th> 
          <th>Header 3</th> 
         </tr> 
         </thead> 
         <tbody> 
         {tableData.map(this.renderTable)} 
         </tbody> 
        </Table> 
       </Popover> 
      ) 
     } 
     else { 
      return <div></div> 
     } 
    } 

}); 

Answer 1

添加showTable您if條件的render功能：

render : function() { 
    let tableData = this.state.data, 
     showTable = this.state.showTable; 

    if (showTable && (tableData && this.state.selectedOption)) { 
     // show Popup 
    } 
    else { 
     // show empty div 
    } 
} 

這樣，當你點擊<Button>，this.state.showTable，您的組件將重新渲染和然後顯示正確的輸出。