spfx – React webpart OnClick event fail to call a module function


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?