How to call two functions in onClick (Reactjs)?

Asked

Viewed 2,357 times

1

Here are my two functions,

chamaLogin = () => {
            this.setState({
                redirect: true
            });
        };

-----------------------------------------------------------------------------
handleSubmit = event => {
            event.preventDefault();

            const arrInsert = {
              nome: this.state.nome,
              apelido: this.state.apelido
            };

            axios.post("http://localhost:3000", arrInsert)
              .then(res => {
                console.log(res);
                console.log(res.data);
              })    

          }

How can I call these two functions in onClick ?

javascript function react onclick

  • Enter how is your onClick and what in fact it is calling now.

  • only : onClick={this.handleSubmit}

  • I wanted to call both functions at the same time or one after the other?

  • can be one after the other, to get better the load... So it would be: first the handleSubmit then the calleLogin

2 answers

3


You have to call one inside the other. You can find a more generic name and call both within that other more generic name function but you can only have one onClick by element.

Sometimes it makes sense to have an event headphone in the parent element/component and another in the child, or to have an capture and another when propagation comes from the element... but in most cases calling two functions is what makes the most sense:

In JSX:

onClick={this.handleClick}

and in the component:

handleClick(e){
    this.chamaLogin();
    this.handleSubmit(e);
}

If you want to chain them:

In Promise’s case it would be :

.then(() => this.chamaLogin());

In the case of setState would theoretically:

chamaLogin(e){
    this.setState({
        redirect: true
    }, () => this.handleSubmit(e));

but have an asynchronous reference to the object of the event (e) will not do what you expect .preventDefault() will no longer work, the event has already been "consumed".

-1

I did it in a very similar way to what Sergio suggested, but without using the this. Here, I call a view (goToSendPage) with the click of the button and also send data to an endpoint (apiCallData). My app is SPA (Single Page App).

My component:

const SendButton = (props) => {
  const { goToSendPage, id, clientNumber, countNumber } = props;
  
  const classes = useStyles();

  const handleClick = (event) => {
    goToSendPage();
    const key = "sendData";
    const value = `cliente: ${clientNumber},${countNumber}`;
    apiCallData(id, key, value);
  };

  return (
    <Container>
      <Button
        variant="contained"
        classes={{ root: classes.root }}
        target="_blank"
        style={{ justifyContent: "space-between", alignItems: "center" }}
        onClick={handleClick}
      />
    </Container>
  );
};

export default SendButton;

In the react documentation have it explained well, in case you want to read later :)

Browser other questions tagged javascript function react onclick

You are not signed in. Login or sign up in order to post.