0

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?

2 Answers 2

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>
2
  • What's the different with my version?
    – Mark L
    Sep 11, 2020 at 3:44
  • the way you are invoking the function. also better to use a button control than a link control Sep 11, 2020 at 5:02
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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