0

I'm kind of confused,

I need to have two actions when onClick this {this.startTextHandler} and an alert when click

<Form.Item>
  {/* <button onClick={this.startTextHandler} className="psButton">START THE TEST</button> */}
  <Button onClick={this.startTextHandler} text="START THE TEST" />
</Form.Item>
nopassport1
  • 1,821
  • 1
  • 25
  • 53
Ben
  • 27
  • 5

4 Answers4

1

You could create a function that includes both events:

<Button onClick={this.callTwoFuncs} text="START THE TEST" />

<script>
function callTwoFuncs() {
    this.startTextHandler();
    this.sendAlert();
}
...
</script>
half of a glazier
  • 1,864
  • 2
  • 15
  • 45
0

Write one function that does two things.

startTextHandler(e) {
    // etc
},
doSomethingElse(e) {
    // etc
},
startTextHandlerAndDoSomethingElse(e) {
    this.startTextHandler(e);
    this.doSomethingElse(e);
}

....

onClick={this.startTextHandlerAndDoSomethingElse}
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Try this:

<Button onClick={()=> { this.startTextHandler(); this.secondAction(); } } text="START THE TEST" />
Max
  • 1,020
  • 7
  • 13
0

You can pass an anonomus function:

<Button 
    onClick={(event) => {
        this.startTextHandler(event);
        this.secondMethod(eventOrWhatever)
    }} 
    text="START THE TEST" 
/>

or a named function:

<Button 
    onClick={this.handleClick} 
    text="START THE TEST" 
/>

handleClick = (event) => {
    this.startTextHandler(event);
    this.secondMethod(eventOrWhatever);
}

BTW: named function give you a better stacktrace too when debugging

Lumpenstein
  • 1,250
  • 1
  • 10
  • 27
  • Generating a function inside the render handler can cause performance problems and is best avoided. https://reactjs.org/docs/faq-functions.html#arrow-function-in-render – Quentin Feb 04 '20 at 13:43
  • True that, but as long as you do not use the button in each row of a list with >100 entries you should be fine though. Even the linked doc says it's OK as long as you don't get performance issues: 'Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.' – Lumpenstein Feb 04 '20 at 13:47