триггер реагирует на щелчок с Javascript

Question

Приложение отлично работает с нажатием кнопки, но я хочу вызвать это событие при загрузке с React. я пытаюсь создать приложение рисования, поэтому инструмент линии должен работать по умолчанию, то есть во время загрузки страницы, даже если пользователь не выбирает инструмент линии.

import React, { PureComponent } from "react";
import Arrow from "../annotations/Arrow";
import canvasToPng from "../annotations/CanvasToPngConverter";
import Curve from "../annotations/Curve";
import getPosition from "../annotations/GetPosition";
import Line from "../annotations/Line";
import Rectangle from "../annotations/Rectangle";
import Text from "../annotations/Text";
import { ARROW, CURVE, LINE, RECTANGLE, TEXT } from "../constants/Annotations";
import { ImageConverter } from "../common/utils/imageConverter";

declare var ClipboardItem: any;
declare var navigator: any;
interface IProps {
  canvases: any;
  screenshotArea: HTMLDivElement;
  updatedImage: any;
  imageCopy: any;
}
class ImageAnnotations extends PureComponent<IProps, any> 
{
  public shapeType ;
  public shapes;
  public updatedImage;
  public shapesList = [];
  public imageConverter = new ImageConverter();
    
  constructor(props: any) 
  {
    super(props);
    this.state = {prevTool: [LINE]};
  }
  shapeObjects = () => {
    const { canvases, screenshotArea } = this.props;
    const { canvasShape } = this.props.canvases;
    const line = new Line(canvases);
    const rectangle = new Rectangle(canvases);
    const curve = new Curve(canvases);
    const arrow = new Arrow(canvases);
    const text = new Text(canvases, screenshotArea);
    const shape = {line,rectangle,curve,arrow,text,canvases,canvasShape };
    return shape;
      };
  public drawShapes = (type: string) => {
    const shapes = this.shapeObjects();
    this.shapes = shapes;
    this.shapeType = type;
    this.setState({...this.state.prevTool,prevTool: type});
    console.log(type);
    shapes.canvasShape.addEventListener("mousedown", this.canvasMouseDown);
    shapes.canvasShape.addEventListener("mousemove", this.canvasMouseMove);
    shapes.canvasShape.addEventListener("mouseup", this.canvasMouseUp);
  };

  public canvasMouseDown = (e: MouseEvent) => {
    e.preventDefault();
    const position = getPosition(e, this.shapes.canvasShape);
    switch (this.shapeType && this.state.prevTool) 
    {
      case LINE && LINE:
        this.shapes.line.shapeBegin(position);
        break;
      case RECTANGLE && RECTANGLE:
        this.shapes.rectangle.shapeBegin(position);
        break;
      case CURVE && CURVE:
        this.shapes.curve.shapeBegin(position);
        break;
      case ARROW && ARROW:
        this.shapes.arrow.shapeBegin(position);
        break;
      case TEXT && TEXT:
        this.updatedImage = this.shapes.text.textBegin(position);
        this.props.updatedImage(this.updatedImage);
        break;
    }
    console.log(position);
  };

  public canvasMouseMove = (e: MouseEvent) => {
    e.preventDefault();
    const position = getPosition(e, this.shapes.canvasShape);

    switch (this.shapeType && this.state.prevTool) {
      case LINE && LINE:
        this.shapes.line.lineMove(position);
        break;
      case RECTANGLE && RECTANGLE:
        this.shapes.rectangle.rectMove(position);
        break;
      case CURVE && CURVE:
        this.shapes.curve.curveMove(position);
        break;
      case ARROW && ARROW:
        this.shapes.arrow.arrowMove(position);
        break;
    }
  };

  public canvasMouseUp = (e: MouseEvent) => {
    e.preventDefault();
    const position = getPosition(e, this.shapes.canvasShape);

    switch (this.shapeType && this.state.prevTool) {
      case LINE && LINE:
        this.shapes.line.lineUp(position);
        break;
      case RECTANGLE && RECTANGLE:
        this.shapes.rectangle.rectUp(position);
        break;
      case CURVE && CURVE:
        this.shapes.curve.curveUp(position);
        break;
      case ARROW && ARROW:
        this.shapes.arrow.arrowUp(position);
        break;
    }
    this.updatedImage = canvasToPng(this.shapes.canvases);
    this.props.updatedImage(this.updatedImage);
  }
  public copyToClipboard = async () => {
    const imageObjectURL = this.props.imageCopy;
    const blob = await this.imageConverter.objecturlToBlob(imageObjectURL);
    const item = new ClipboardItem({"image/png": blob});
    navigator.clipboard.write([item]);
  }  
  render() {
    return (
      <div className="toolbar-annotation" >
        <div className="tools">
          <button
            id="copy"
            name="copy"
            title="Copy to Clipboard"
            className="button copy"
            onClick={this.copyToClipboard}
          >  <span></span></button>
          
          <button
            id="Curve"
            name="curved"
            onClick={this.drawShapes.bind(this, CURVE)}
            title="Pencil"
            className="button curved-line"
          >
            <span></span>
          </button>

          <button
            id="Arrow"
            name="arrow"
            onClick={this.drawShapes.bind(this, ARROW)}
            className="button arrow"
            title="Arrow"
          > 
             <span></span>
          </button>
          <button
            id="Line"
            name="line"
            className="button line"
            onClick={this.drawShapes.bind(this, LINE)}
            title="Line"
          >
         {this.drawShapes.bind(this, LINE)}  <span></span>
          </button>
          <button
            id="Text"
            name="text"
            onClick={this.drawShapes.bind(this, TEXT)}
            className="button text"
            title="Text"
          >
            <span></span>
          </button>
          <button
            id="Rectangle active"
            name="rect"
            onClick={this.drawShapes.bind(this, RECTANGLE)}
            className="square-empty"
            title="Rectangle"
          >
            <span></span>
          </button>
        </div>
      </div>
    );
  }
  componentWillUnmount() 
  {
    const shapes = this.shapeObjects();
    shapes.canvasShape.removeEventListener("mousedown", this.canvasMouseDown);
    shapes.canvasShape.removeEventListener("mousemove", this.canvasMouseMove);
    shapes.canvasShape.removeEventListener("mouseup", this.canvasMouseUp);
  }
}

export default ImageAnnotations;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Приложение прекрасно работает при нажатии кнопки, но я хочу вызвать это событие в onload с помощью React. я пытаюсь создать приложение рисования, поэтому инструмент «Линия» должен работать по умолчанию, то есть во время загрузки страницы, даже если пользователь не выбрал инструмент «Линия».