我如何在 React 的 class 组件中定义一个方法？

Question

我用 React 做了一个简单的数字时钟。它似乎工作。但是，我想在 setState() 中单独定义回调函数。但是我得到了一个错误。你知道我如何在 componenDidMount 之外定义一个名为 tick() 的函数吗？下面是我的代码

import "./Clock.css";

class Clock extends React.Component {
    state = { date: new Date() };

    componentDidMount() {
        setInterval(() => {
            this.setState({ date: new Date() });
        }, 1000);
        console.log("componentdidmount");
    }

    render() {
        return (
            <div className="clock-container">
                <h1 className="clock">{this.state.date.toLocaleTimeString()}</h1>
            </div>
        );
    }
}

export default Clock;

Answer 1

这就是你想要的样子吗？

tick(){
    this.interval = setInterval(() => {
        this.setState({ date: new Date() });
    }, 1000);
}

componentDidMount() {
    this.tick();
    console.log('componentdidmount');
}

componentWillUnmount(){
    clearInterval(this.interval);
}

我如何在 React 的 class 组件中定义一个方法？

How can I define a method inside a class component in React?

reactjs

react-lifecycle