React webpart OnClick event fail to call a module function

Question

I am working on a React spfx webpart. I inserted below code in my tsx file:

<a href="#" className={ styles.button } onClick={ ()=> alert('greeting!') }  >
                <span className={ styles.label }>Greeting</span>
              </a>

In my test, the "Greeting" button show up and prompt message correctly when press.

Then I added a file "my-script.ts". The content as below:

export function Greeting()
{
        alert("Greeting in module!");
}

Then in my tsx file, I imported above module:

import * as MyScript from '../my-script';

and amended the button code as below:

<a href="#" className={ styles.button } onClick={ ()=> MyScript.Greeting }  >
                <span className={ styles.label }>Greeting</span>
              </a>

There is no error during compile. However when I press the button nothing happen. In the console there is no error. It is just not triggering anything.

May I know what's the problem?

Answer 1

You just need to make it a function call. This setup works for me.

MyFunction.ts

export function Greet(){
    alert('greet');
}

import in tsx

import * as MyFunction  from './MyFunction'; //any path where you ts script is located.

button click

 <button onClick={()=>MyFunction.Greet()}>click me</button>

Answer 2

You could use the code like this ：

<a href="#" className={ styles.button } onClick={  MyScript.Greeting }  >
                <span className={ styles.label }>Greeting</span>
              </a>

Official document: https://reactjs.org/docs/handling-events.html