react-bootstrap-table/react-bootstrap-table2

Detect row onClick event and checkbox onSelect event separately

Open

#367 aberto em 4 de jun. de 2018

Ver no GitHub
 (6 comments) (2 reactions) (0 assignees)JavaScript (415 forks)batch import
help wanted

Métricas do repositório

Stars
 (1.249 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Currently I am using both selectRow and rowEvents . My problem is when I select checkbox, row onClick event firing automatically . Is there any way to detect checkbox event without firing any row onclick event ? I am using 0.1.12 .

Here is my component :

constructor(prop) {
        super(prop);
        this.columns = [{
            dataField: 'mail_from',
            text: 'From'
        }, {
            dataField: 'subject',
            text: 'Subject'
        }, {
            dataField: "date",
            text: "Date"
        }];
        this.state = {
            loading: true,
            loadingText: "Downloading mails..",
            data: "",
            details: false,
            id: 0,
            page: 1,
            sizePerPage: 0,
            totalSize: 0
        }
        this.rowEvent = {
            onClick: (e, row, rowIndex) => {
                this.setState({details: true, id:rowIndex});
            }
        };
        this.onTableChange = (type, { page, sizePerPage }) => {
            this.setState({loading: true});
            this.setState({loadingText: "Downloading mails.."});
            this.setState({page: page});
            this.loadData(page);
        };
        this.selectRow = {
            mode: 'checkbox',
            onSelect: (row, isSelect, rowIndex, e) => {
                console.log(isSelect, rowIndex, e);
            }
        }
    }

and

<BootstrapTable
                            remote
                            striped
                            hover
                            condensed
                            bordered={false}
                            pagination={ paginationFactory({
                                page: this.state.page,
                                sizePerPage: this.state.sizePerPage,
                                totalSize: this.state.totalSize,
                                hideSizePerPage: true,
                                hidePageListOnlyOnePage: true,
                            }) }
                            keyField='id'
                            data={this.state.data}
                            columns={this.columns}
                            selectRow={ this.selectRow }
                            rowEvents={this.rowEvent}
                            noDataIndication="Mailbox is empty"
                            onTableChange={ this.onTableChange }
                        />

Guia do colaborador