react-bootstrap-table/react-bootstrap-table2

Detect row onClick event and checkbox onSelect event separately

Open

#367 ouverte le 4 juin 2018

Voir sur GitHub
 (6 commentaires) (2 réactions) (0 assignés)JavaScript (415 forks)batch import
help wanted

Métriques du dépôt

Stars
 (1 249 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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 }
                        />

Guide contributeur