如何绑定事件处理函数,使其能够成功地设置React状态?

import React, { Component } from 'react';
import Table from './Components/Table';
import './App.css';
import SATResultData from './SATResults.js';

class App extends Component {
  constructor() {
    super();
    this.state = {
      SATResultData: {},
      columnToSort: '',
      sortOrder: 'asc'
    }
  }

  componentWillMount() {
    this.setState({SATResultData: SATResultData});
  }

  render() {
    return (
          <main>
            <Table SATResultData={this.state.SATResultData}/>
          </main>
        );
      }
    }

export default App;

这是我的SATHeaderRow.js公司:

import React, { Component } from 'react';
import SATHeaderItem from './SATHeaderItem';

class SATHeaderRow extends Component {
  render() {
    let headerItems = this.props.headerRow.map(headerText => {
      return (
        <SATHeaderItem headerText={headerText}/>
      );
    });

    return (
      <tr>
        {headerItems}
      </tr>
    );
  }
}
export default SATHeaderRow;

import React, { Component } from 'react';
import sortByColumn from '../Logic/sort';
import sorticon from './sort.svg';

class SATHeaderItem extends Component {
    render() {
      return (
        <th>
          {this.props.headerText} <img src={sorticon} alt="Sort ascending" onClick={sortByColumn}/>
        </th>
        )
    }
}
export default SATHeaderItem;

最后,我的排序.js文件是:

const flipSortOrder = {
  'asc': 'desc',
  'desc': 'asc'
};

export default function sortByColumn(columnName) {
  console.log('hello');
  console.log(this.state.sortOrder);
  this.setState({'sortOrder': flipSortOrder[this.state.sortOrder]});
}

sortByColumn 什么时候 sorticon 已单击。函数调用正确,但在函数的第二行抛出错误“Cannot read property'state'of undefined” . 我读了其他答案,比如 this one 我需要绑定事件处理程序。然而:

因此,我的问题是:

1. 在哪里添加 this.sortByColumn = this.sortByColumn.bind(this); App SATHeaderItem 因为那是 排序列 有人打电话吗?
2. this.setState({'sortOrder': flipSortOrder[this.state.sortOrder]}); 代码行成功地将“asc”翻转为“desc”,反之亦然?