我正在学习ReactJS,所以我在这方面仍然是个新手,我正在为计数器构建一个简单的React类组件,只是为了了解发生了什么,我面临的是我试图在div上添加事件列表来增加点击计数器:
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
clicks: 0
};
this.myRef = React.createRef();
}
componentDidMount() {
this.myRef.current.addEventListener("click", this.clickHandler);
}
componentWillUnmount() {
this.myRef.current.removeEventListener("click", this.clickHandler);
}
clickHandler() {
// here is my problem
this.setState({
clicks: this.state.clicks + 1
});
}
render() {
return (
<div className="my-component" ref={this.myRef}>
<h2>My Component ({this.state.clicks} clicks)</h2>
</div>
);
}}
问题是我在clickHandler()中得到了这个错误:Cannot read properties of undefined (reading 'clicks')
我试过这个:
this.setState({
clicks: this.state+ 1
});
但是我得到了一个新的错误this.setState is not a function
1条答案
按热度按时间oprakyz71#
你通过
addEventListener()
分配的事件监听器没有正确的作用域,因为ECMAScript不提供自动绑定。所以我建议你在构造函数中重新分配clickHandler函数,以包含正确的绑定: