如何删除React-bootstrap popover onClick？

debugcn 发表于 Dev

胆

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

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

我认为我走在正确的道路上，但现在，当用户单击 Button 时什么也没有发生。它将以 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>
        }
    }

});

皮内达

在您的函数中添加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，您的组件将重新渲染，然后显示正确的输出。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。