Как динамически использовать свойство deselectOnClickaway таблицы material-ui? - PullRequest
Новая
       10

Как динамически использовать свойство deselectOnClickaway таблицы material-ui?

0 голосов
/ 30 октября 2018

Я использую версию Material-UI 0.17.1 с реакцией и редукцией. Я создал функцию сортировки по столбцам для таблицы, которую я использую, и установил deselectOnClickaway = {this.props.isSelectedClear}. Я установил начальное состояние this.props.isSelectedClear в false в хранилище с избыточностью. Когда я щелкаю заголовок таблицы, чтобы выполнить сортировку, я устанавливаю this.props.isSelectedClear в значение true, но выбор таблицы не будет очищен, пока я не щелкну заголовок таблицы для повторной сортировки. Может кто-нибудь сказать мне, почему это происходит? Пожалуйста, обратитесь к коду ниже.

TableComponent.js 

import React, { PropTypes } from 'react';
import Table from 'material-ui/Table';
import TableHeader from 'material-ui/TableHeader';
import TableRow from 'material-ui/TableRow';
import TableHeaderColumn from 'material-ui/TableHeaderColumn';
import TableBody from 'material-ui/TableBody';
import TableRowColumn from 'material-ui/TableRowColumn';
import FlatButton from 'material-ui/FlatButton';

class TableComponent extends React.Component{

    render(){
        return(
            <Table
                onRowSelection={(rows) => this.props.handleCellClick(rows)}
                multiSelectable
                height={'400px'}
            >
                <TableHeader displaySelectAll selectable>
                    <TableRow>
                        <TableHeaderColumn tooltip='Name'>
                            <FlatButton
                                label="Name"
                                labelPosition="before"
                                secondary
                                icon={(this.props.orderBy === 'displayName') ? (this.props.order == 'asc') ? <i className="material-icons">arrow_upward</i> : <i className="material-icons">arrow_downward</i> : null}
                                onClick={() => { this.props.tableSortAction('displayName') }
                            />
                        </TableHeaderColumn>
                        <TableHeaderColumn tooltip='Created Date'>
                            <FlatButton
                                label="Created Date"
                                labelPosition="before"
                                secondary
                                icon={(this.props.orderBy === 'createdOn') ? (this.props.order == 'asc') ? <i className="material-icons">arrow_upward</i> : <i className="material-icons">arrow_downward</i> : null}
                                onClick={() =>  this.props.tableSortAction('createdOn')}
                            />
                        </TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody displayRowCheckbox selectable deselectOnClickaway={this.props.isSelectedClear}>
                {
                    (this.props.ifaDocList.length > 0)
                    ? this.props.ifaDocList.map((doc, index) =>
                        <TableRow key={index}>
                              <TableRowColumn>{doc.displayName}</TableRowColumn>
                              <TableRowColumn>{doc.createdOn.replace('T', ' ').split('.')[0]}</TableRowColumn>
                        </TableRow>
                    )
                    :<TableRow><TableRowColumn style={styles.font}>{ 'THERE ARE NO PANELS TO DISPLAY' }</TableRowColumn></TableRow>

                }
                </TableBody></Table>
        );
    }
}
TableComponent.propTypes = {
    ifaDocList: PropTypes.array,
    handleCellClick: PropTypes.func,
    tableSortAction: PropTypes.func,
    isSelectedClear: PropTypes.bool,

};
export default TableComponent;
...