在React文档时钟示例中添加一个停止计时器的按钮

，可以通过以下步骤实现：

首先，在React组件的状态中添加一个布尔值isRunning，用于表示计时器是否正在运行。在组件的构造函数中初始化该状态为true。

constructor(props) {
  super(props);
  this.state = {
    date: new Date(),
    isRunning: true
  };
}

在组件的render方法中，根据isRunning状态来决定是否显示停止计时器的按钮。当isRunning为true时，显示一个按钮，点击按钮时调用stopTimer方法。

render() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      {this.state.isRunning && <button onClick={this.stopTimer}>Stop Timer</button>}
    </div>
  );
}

在组件中添加stopTimer方法，用于停止计时器。在该方法中，调用clearInterval函数来清除计时器的定时任务，并将isRunning状态设置为false。

stopTimer() {
  clearInterval(this.timerID);
  this.setState({ isRunning: false });
}

最后，在组件的生命周期方法componentDidMount中，启动计时器并将其ID保存在组件实例的属性timerID中。这样可以在后续的操作中使用该ID来清除计时器。

componentDidMount() {
  this.timerID = setInterval(() => this.tick(), 1000);
}

完整的代码示例如下：

import React from 'react';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      isRunning: true
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  stopTimer() {
    clearInterval(this.timerID);
    this.setState({ isRunning: false });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        {this.state.isRunning && <button onClick={this.stopTimer}>Stop Timer</button>}
      </div>
    );
  }
}

export default Clock;

这样，当组件渲染时，会显示一个当前时间的时钟，并且在时钟下方会有一个"Stop Timer"的按钮。点击按钮后，计时器会停止，并且按钮会消失。