Javascript React JS-单击更改排序图标

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

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>
            );
        }
    }

for（变量i=0；i

---

IconType

只包含文本

triangle

，而不是IconSort、top或bottom

您必须告诉React以触发虚拟dom的重新评估-您可以使用

forceUpdate（）

方法执行此操作：