当setInterval在componentDidMount中运行时如何clearInterval onClick？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.timerId = null; // 初始化定时器变量
  }

  componentDidMount() {
    this.timerId = setInterval(() => {
      // 定时器逻辑
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerId); // 在组件卸载时清除定时器
  }

  handleClick() {
    clearInterval(this.timerId); // 在点击事件中清除定时器
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Clear Interval</button>
    );
  }
}

export default MyComponent;