Question

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

表格已正确呈现并显示。但是我希望用户能够使用popover中的按钮再次删除它。

我认为我走的是正确的道路，但是现在，当用户点击按钮时没有任何反应。它将从false开始，当它被渲染时，返回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时，您的组件将重新渲染，然后显示正确的输出。

如何在onClick上删除React-bootstrap popover？

1 个答案: