reactjs 如何到达类组件中的状态?

yqkkidmi  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(114)

我正在学习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

oprakyz7

oprakyz71#

你通过addEventListener()分配的事件监听器没有正确的作用域,因为ECMAScript不提供自动绑定。所以我建议你在构造函数中重新分配clickHandler函数,以包含正确的绑定:

constructor(props) {
    super(props);
    this.state = {
        clicks: 0
    };
    this.myRef = React.createRef();

    /******** LIKE this ********/

    this.clickHandler = this.clickHandler.bind(this); 
}

相关问题