title: trigger react onclick vent with Javascript
body: <p>The app works fine with on click of the button,but i want to call this    event in on load with React. i am trying to create the paint    application,so the line tool should work by default that is while    page loads,even if user do not select line tool.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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&lt;IProps, any&gt; 
  {
    public shapeType ;
    public shapes;
    public updatedImage;
    public shapesList = [];
    public imageConverter = new ImageConverter();
      
    constructor(props: any) 
    {
      super(props);
      this.state = {prevTool: [LINE]};
    }
    shapeObjects = () =&gt; {
      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) =&gt; {
      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) =&gt; {
      e.preventDefault();
      const position = getPosition(e, this.shapes.canvasShape);
      switch (this.shapeType &amp;&amp; this.state.prevTool) 
      {
        case LINE &amp;&amp; LINE:
          this.shapes.line.shapeBegin(position);
          break;
        case RECTANGLE &amp;&amp; RECTANGLE:
          this.shapes.rectangle.shapeBegin(position);
          break;
        case CURVE &amp;&amp; CURVE:
          this.shapes.curve.shapeBegin(position);
          break;
        case ARROW &amp;&amp; ARROW:
          this.shapes.arrow.shapeBegin(position);
          break;
        case TEXT &amp;&amp; TEXT:
          this.updatedImage = this.shapes.text.textBegin(position);
          this.props.updatedImage(this.updatedImage);
          break;
      }
      console.log(position);
    };
  
    public canvasMouseMove = (e: MouseEvent) =&gt; {
      e.preventDefault();
      const position = getPosition(e, this.shapes.canvasShape);
  
      switch (this.shapeType &amp;&amp; this.state.prevTool) {
        case LINE &amp;&amp; LINE:
          this.shapes.line.lineMove(position);
          break;
        case RECTANGLE &amp;&amp; RECTANGLE:
          this.shapes.rectangle.rectMove(position);
          break;
        case CURVE &amp;&amp; CURVE:
          this.shapes.curve.curveMove(position);
          break;
        case ARROW &amp;&amp; ARROW:
          this.shapes.arrow.arrowMove(position);
          break;
      }
    };
  
    public canvasMouseUp = (e: MouseEvent) =&gt; {
      e.preventDefault();
      const position = getPosition(e, this.shapes.canvasShape);
  
      switch (this.shapeType &amp;&amp; this.state.prevTool) {
        case LINE &amp;&amp; LINE:
          this.shapes.line.lineUp(position);
          break;
        case RECTANGLE &amp;&amp; RECTANGLE:
          this.shapes.rectangle.rectUp(position);
          break;
        case CURVE &amp;&amp; CURVE:
          this.shapes.curve.curveUp(position);
          break;
        case ARROW &amp;&amp; ARROW:
          this.shapes.arrow.arrowUp(position);
          break;
      }
      this.updatedImage = canvasToPng(this.shapes.canvases);
      this.props.updatedImage(this.updatedImage);
    }
    public copyToClipboard = async () =&gt; {
      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 (
        &lt;div className="toolbar-annotation" &gt;
          &lt;div className="tools"&gt;
            &lt;button
              id="copy"
              name="copy"
              title="Copy to Clipboard"
              className="button copy"
              onClick={this.copyToClipboard}
            &gt;  &lt;span&gt;&lt;/span&gt;&lt;/button&gt;
            
            &lt;button
              id="Curve"
              name="curved"
              onClick={this.drawShapes.bind(this, CURVE)}
              title="Pencil"
              className="button curved-line"
            &gt;
              &lt;span&gt;&lt;/span&gt;
            &lt;/button&gt;
  
            &lt;button
              id="Arrow"
              name="arrow"
              onClick={this.drawShapes.bind(this, ARROW)}
              className="button arrow"
              title="Arrow"
            &gt; 
               &lt;span&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button
              id="Line"
              name="line"
              className="button line"
              onClick={this.drawShapes.bind(this, LINE)}
              title="Line"
            &gt;
           {this.drawShapes.bind(this, LINE)}  &lt;span&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button
              id="Text"
              name="text"
              onClick={this.drawShapes.bind(this, TEXT)}
              className="button text"
              title="Text"
            &gt;
              &lt;span&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button
              id="Rectangle active"
              name="rect"
              onClick={this.drawShapes.bind(this, RECTANGLE)}
              className="square-empty"
              title="Rectangle"
            &gt;
              &lt;span&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
    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;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The app works fine with on click of the button,but i want to call this event in onload with React. i am trying to create the paint application,so the line tool should work by default that is while page loads,even if user do not select line tool.</p>