ReactJS切換排列圖標 - this.setState不是一個函數

Question

我試圖切換爲每個表標題中的排序圖標點擊後：

在我render我：

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

      this.setState({ 
       Icon: IconName 
      }).bind(this); 

      onToggleOrder(columnName, sortOrder); 
     } 
    } 

後來，當我「M通過我的JSON循環，從而產生標題我做：

 {this.props.rowScheme[i].title} <Glyphicon glyph={this.state.Icon} /> 

，但我得到this.setState不是一個函數

任何人都可以幫忙嗎？

編輯，渲染全：

getInitialState: function(){ 
    return { 
     Icon: 'triangle-top' 
    } 
}, 

render: function() { 
    var headerColumns = []; 
    var IconType = 'triangle'; 
    var IconSort = 'top'; 
    var IconName = 'triangle-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') ? 'bottom' : 'top'; 
      } else { 
       sortOrder = 'asc'; 
       IconSort = 'top'; 
      } 
      IconName = IconType + "-" + IconSort; 

      onToggleOrder(columnName, sortOrder); 

      this.setState({ 
       Icon: IconName 
      }); 
     } 
    } 

    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 { 

      headerColumns.push(
       <th key={_.uniqueId('edit_student_tbl_th_')} 
        onClick={bindContextOnClick(this.props.rowScheme[i].column).bind(this)}> 
        <span className="sortableColumn"> 
         {this.props.rowScheme[i].title} <Glyphicon glyph={this.state.Icon} /> 
        </span> 
       </th> 
      ); 
     } 
    } 

    return (
     <thead> 
      <tr> 
       {headerColumns} 
       <th className={this.props.rowActionColumnClass}> </th> 
      </tr> 
     </thead> 
    ); 
} 
}); 

Answer 1

您需要使用的功能以及綁定的語境中。例如，你可能有這樣的東西：onClick={this.bindContextOnClick(columnName)}。

但需要有這樣的：onClick={this.bindContextOnClick.bind(this, columnName)}