如何删除React-bootstrap popover onClick？

Question

I am rendering a table inside popover, which is triggered by an event in another React class.

The table is correctly rendered and shown. I do however want for the user to be able to remove it again, with a button in the popover.

I think I'm on the right path, but right now, nothing happens when the user clicks the Button. It will start out as false and when it's rendered, return true; but how do I actually hide the popover ?

Sample code:

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

Add showTable to your if condition in your render function:

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

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

This way, when you click the <Button> , this.state.showTable , your component will re-render and then show the correct output.