Adding onClick event to a React Web Part

Question

I want to add a simple onclick function, but having trouble doing it.

I have looked online, and have tried multiple ways - such as binding it - this.update.bind(this)} within the html string, etc

What happens at the moment is the 'update' functions runs immediately at form load.

This is what my code looks like now, any help will be greatly appreciated.

import * as React from 'react';
import { css } from 'office-ui-fabric-react';

import styles from '../ReactWebPart.module.scss';
import { IReactWebPartWebPartProps } from '../IReactWebPartWebPartProps';

export interface IReactWebPartProps extends IReactWebPartWebPartProps {

}

export default class ReactWebPart extends React.Component
{
  constructor()
  {
    super();
    this.state =
    {
      //this.properties.edit = "797897"
    };

    //this.update = this.update.bind(this)
  }
  //getInitialState: function() {
  //  this.setState(this.props.dcText = "Initial state");
  //}

  public update(): any
  {
    debugger;
    alert("hello");
  }



  public render(): JSX.Element
  {

    return (


<div className={styles.reactWebPart}>
    <div className={styles.container} >
      <div className={css('ms-Grid-row ms-bgColor-themeDark ms-fontColor-white', styles.row)}>
        <div className='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>
          <span className='ms-font-xl ms-fontColor-white'>
            Welcome to SharePoint!
          </span>
          <p className='ms-font-l ms-fontColor-white'>
            Customize SharePoint experiences using Web Parts.
          </p>
          <p className='ms-font-l ms-fontColor-white'>
            {this.props.description}
          </p>

          <p className='ms-font-l ms-fontColor-white'>
            dcTest :: {this.props.dcText}
          </p>

        <button onclick={ () => this.update() } >Click here</button>

          <a
            className={css('ms-Button', styles.button)}
            href='https://github.com/SharePoint/sp-dev-docs/wiki'
          >
            <span className='ms-Button-label' >Learn more</span>
          </a>
        </div>
      </div>
    </div>
  </div>
    );
  }
}

Answer 1

You don't seem to have any markup returned from your render method. In your JSX (or in this case TSX) markup you just need to add the onclick and point to a function in your class, something like this:

import * as React from 'react';

import { IHelloWorldWebPartProps } from '../IHelloWorldWebPartProps';

export interface IHelloWorldProps extends IHelloWorldWebPartProps {
}

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {

  constructor(props: IHelloWorldProps) {
    super(props);
    // set initial state
  }

  public button_click(): void {
    // do something here
  }

  public render(): JSX.Element {
    return (
      <div>
        <h1>Welcome to SharePoint!</h1>
         <button onClick={() => this.button_click() }>Click Me</button>
      </div>
    );
  }

You could just use

onClick=(this.button_click()}

but the lambda expression (which just does a function callback) ensures that "this" is set to the control itself in the handler.