如何删除 React-bootstrap popover onClick？

Question

我正在渲染一个 table inside popover，它是由另一个 React class 中的事件触发的。

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

我认为我在正确的道路上，但现在，当用户单击按钮时没有任何反应。它一开始是假的，当它被渲染时，return 真；但是我实际上如何隐藏 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 时，您的组件将重新呈现并显示正确的输出。

如何删除 React-bootstrap popover onClick？

How to remove React-bootstrap popover onClick?

javascript

reactjs

react-bootstrap