Question

当用户对列进行排序时，我尝试更改表标题的排序图标，我目前有自己的排序功能：

var headerColumns = [];
    var IconType = 'triangle';
    var IconSort = 'top';
    var onToggleOrder = this.props.onToggleOrder;
    var sortColumn = this.props.sortColumn;
    var sortOrder = this.props.sortOrder;

    function bindContextOnClick(columnName){
        return function(){
            if(columnName === sortColumn) {
                sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc';
                IconSort = (sortOrder === 'asc') ? 'top' : 'bottom';
            } else {
                sortOrder = 'asc';
                IconSort = 'top';
            }
            IconType = IconType + "-" + IconSort;

            onToggleOrder(columnName, sortOrder);
        };
    }

然后我遍历生成表列的json：

 for (var i = 0; i < this.props.rowScheme.length; i = i + 1) {
        // by default all visible columns are sortable, unless it has 'sortable'=false option
        if(_.has(this.props.rowScheme[i],"sortable") && !this.props.rowScheme[i].sortable) {
            headerColumns.push(<th key={_.uniqueId('edit_student_tbl_th_')}>{this.props.rowScheme[i].title}</th>);
        } else {
            console.log(IconType);
            headerColumns.push(
                <th key={_.uniqueId('edit_student_tbl_th_')}
                    onClick={bindContextOnClick(this.props.rowScheme[i].column)}>
                    <span className="sortableColumn">
                        {this.props.rowScheme[i].title} <Glyphicon glyph={IconType} />
                    </span>
                </th>
            );
        }
    }

IconType只包含文字triangle，而不是IconSort，顶部或底部

Answer 1

你必须告诉React触发重新评估虚拟dom - 你可以使用{{1}} - 方法执行此操作：https://facebook.github.io/react/docs/component-api.html#forceupdate

React JS - 更改排序图标onClick

1 个答案: