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;
这是我的 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
. 我从其他答案中读到,例如我需要绑定事件处理程序的答案。然而:
因此,我的问题是:
- 我在哪里添加
this.sortByColumn = this.sortByColumn.bind(this);
代码行?在App
类的构造函数中,还是应该在类中创建一个新的构造函数,SATHeaderItem
因为那是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;
推荐阅读
- android - 如何使用 ADB 将一些文本复制到 android 系统剪贴板?
- django - 通过 Heroku Github 管道部署公共 Django 项目而不公开凭据
- macos - npm run watch 在更新到 Mac OS X Mojave 后出现错误
- python - 如何获取输入 gtk.entry 字段的值并在按钮信号之外使用它
- javascript - 如何插入activeTab权限
- javascript - 在 JavaScript 中,如何在不使用正则表达式的情况下用 replace() 函数替换字符串中的多个值?
- c# - 防止 WinForms 应用程序中的值重复
- c# - FTP、SFTP 或套接字
- php - 使用 HTML 和 PHP 生成 MPDF 到 PDF
- java - 为互斥请求参数设计 API 的更好方法是什么?