如何绑定事件处理程序函数，使其可以成功设置React状态？

Question

我正在编写我的第一个React应用程序，以在用户单击向上和向下箭头时按列对以下数据进行排序。下面的屏幕截图：

这是我的App.js：

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;

这是我的SATHeaderItem.js：

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;

最后，我的sort.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]});
}

我想添加一个onClick侦听器，以在单击sortByColumn时调用sorticon。该函数已正确调用，但是在sortByColumn的第二行上引发了错误“无法读取未定义的属性'state'”。我从其他答案（例如this one）中读取了我需要绑定事件处理程序的信息。但是：

因此，我的问题是：

1. 我在哪里添加this.sortByColumn = this.sortByColumn.bind(this);代码行？在App类的构造函数中，还是应该在SATHeaderItem类中创建一个新的构造函数，因为这就是调用sortByColumn的地方？
2. this.setState({'sortOrder': flipSortOrder[this.state.sortOrder]});行代码能否成功将'asc'翻转为'desc'，反之亦然？