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

我正在编写我的第一个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;

我想添加一个onClick侦听器，以便在单击

sorticon

时调用

sortByColumn

。函数调用正确，但在

sortByColumn

的第二行抛出错误“无法读取未定义的属性'state'。我从其他答案中读到，比如我需要绑定事件处理程序。然而：

因此，我的问题是：

---

在哪里添加

this.sortByColumn=this.sortByColumn.bind（this）代码行？在
App
类的构造函数中，或者我应该在
satweaderItem
类中创建一个新的构造函数，因为这是调用
sortByColumn
的地方

将

this.setState（{'sortOrder'：flipSortOrder[this.state.sortOrder]}）代码行成功地将“asc”翻转为“desc”，反之亦然

这里是诀窍

您甚至不需要导入sort.js文件，只需在组件中直接使用setState即可

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

    class SATHeaderItem extends Component {
        constructor(props) {
          super(props);
          this.state = {
               sortOrder: 'asc'
            };
        }
        render() {
          return (
            <th>
              {this.props.headerText} 
          <img src={sorticon} alt="Sort ascending" 
               onClick={() => this.setState(prevState => {(
               sortOrder: (prevState.sortOrder === 'asc' ? 'desc' : 'asc')
              )} }/>
            </th>
            )
        }
    }
    export default SATHeaderItem;

import React，{Component}来自'React'；
从“../Logic/sort”导入sortByColumn；
从“./sort.svg”导入sorticon；
类SATHeaderItem扩展组件{
建造师（道具）{
超级（道具）；
此.state={
排序器：“asc”
};
}
render（）{
返回(
{this.props.headerText}
this.setState（prevState=>{(
排序器：（prevState.sortOrder=='asc'？'desc'：'asc'）
)} }/>
)
}
}
导出默认SATHeaderItem；

this.sortByColumn=this.sortByColumn.bind（this）；

应添加到方法sortByColumn所在的组件中。此方法应包含在组件本身中，而不是外部文件中

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;

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

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

    class SATHeaderItem extends Component {
        constructor(props) {
          super(props);
          this.state = {
               sortOrder: 'asc'
            };
        }
        render() {
          return (
            <th>
              {this.props.headerText} 
          <img src={sorticon} alt="Sort ascending" 
               onClick={() => this.setState(prevState => {(
               sortOrder: (prevState.sortOrder === 'asc' ? 'desc' : 'asc')
              )} }/>
            </th>
            )
        }
    }
    export default SATHeaderItem;