如何解决函数组件中的this.handleClick.bindthis
我想使用React中的功能组件创建分页。我的问题是我无法使用这种结构的this.handleClick.bind(this)
。是否可以以其他方式仍使用功能组件来使用分页?现在的代码是
import React from "react";
const Pagination = (props) => {
this.handleClick = this.handleClick.bind(this); // I can't use it
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(props.nameList.length / props.todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map((number) => {
return (
<li key={number} id={number} onClick={this.handleClick}>
{number}
</li>
);
});
return <ul id="page-numbers">{renderPageNumbers}</ul>;
};
export default Pagination;
解决方法
在功能组件中,您只需要直接定义和使用方法,而不必绑定到上下文
import React from "react";
const Pagination = (props) => {
const handleClick = (event) => {
console.log('ok')
}
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(props.nameList.length / props.todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map((number) => {
return (
<li key={number} id={number} onClick={handleClick}>
{number}
</li>
);
});
return <ul id="page-numbers">{renderPageNumbers}</ul>;
};
export default Pagination;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。