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