如何删除React-bootstrap popover onClick？

Question

我在popover中渲染一个表，该表由另一个React类中的事件触发。

该表已正确呈现并显示。 但是，我确实希望用户能够再次使用弹出窗口中的按钮将其删除。

我认为我走在正确的道路上，但是现在，当用户单击按钮时，什么也没有发生。 它将以false开始，并在渲染时返回true；否则，它将返回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添加到render函数的if条件中：

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 ，您的组件将重新呈现，然后显示正确的输出。