4

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>
    );
  }
}


1 Answer 1

4

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.

4
  • Hi there, thanks for your comment. I have corrected the initial post HTML. However I can't get your extract to work either, on your second example onClick=(this.button_click()} it works on initial load, but the click event doesn't trigger my function.
    – devlin
    Aug 25, 2016 at 11:10
  • Your updated code looks fine to me. I would try using F12 tools in the browser and step through the compiled JS to maybe figure why it is calling the handler when the page renders.
    – SPDoctor
    Aug 25, 2016 at 11:36
  • 1
    it was because i had onClick written as onclick :(
    – devlin
    Aug 25, 2016 at 15:54
  • Aw, I didn't spot that either!
    – SPDoctor
    Aug 26, 2016 at 8:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.