Onclick with two functions- React

Question

How can I call two functions via onclick? I have the following code, and with each click the status is updated. I wish, however, that the timer method was also called.

<Button className="btn-link" color="primary" size="lg" style={{ position: "absolute", left: 250 }} onClick={() => this.setState({ index: 1, visibility: true })}>160x600</Button>

the timer method:

timer() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }

    this.timeout = setTimeout(() => {
      this.setState({ visibility: false });
    }, 7000);
  }

this is the complete component code.

import React, { Component } from "react";
import { Button } from 'reactstrap';

class PubblicitaPulsanti extends Component {
  state = {
    index: 0,
    iframeSrcs: ["/300x250", "/160x600", "/468x60", "/728x90"],
    heightSrcs: [250, 600, 60, 90],
    widthSrcs: [300, 160, 468, 728],
    visibility: false,
    leftSrcs: [1230, 50, 500, 400],
    rightSrcs: [0, 0, 20, 20],
    topSrcs: [10, 10, 500, 500]
  };

  componentDidMount() {
    document.addEventListener("keydown", this.onKeyDown.bind(this));
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.onKeyDown.bind(this));
  }


  onKeyDown(event) {
    if (event.keyCode === 17) {
      this.reload();
    }
    if (event.keyCode === 96) {
      this.setState({ index: 0, visibility: true });
    }
    if (event.keyCode === 97) {
      this.setState({ index: 1, visibility: true });
    }
    if (event.keyCode === 98) {
      this.setState({ index: 2, visibility: true });
    }
    if (event.keyCode === 99) {
      this.setState({ index: 3, visibility: true });
    }
    this.timer();
  }

  timer() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }

    this.timeout = setTimeout(() => {
      this.setState({ visibility: false });
    }, 7000);
  }

  handleClick1 = (evt) => {
    this.setState({ index: 1, visibility: true });
    this.timer();
  }



  handleClick = (evt) => {
    this.setState({ index: 2, visibility: true });
    this.timer()

  }

  handleClick3 = (evt) => {
    this.setState({ index: 3, visibility: true });
    this.timer()
  }

  handleClick4 = (evt) => {
    this.setState({ index: 0, visibility: true })
      ;
    this.timer()
  }

  reload() {
    const iframeLength = this.state.iframeSrcs.length;
    if (this.state.index < iframeLength) {
      this.setState({
        index: this.state.index + 1,
        visibility: true
      });
    } else {
      this.setState({ index: 0, visibility: true }); //starting again
    }
    this.timer();
  }

  render() {
    return (
      <div>

        <div>
          {this.state.visibility ? (
            <iframe
              style={{
                position: "absolute",
                left: this.state.leftSrcs[this.state.index],
                right: this.state.rightSrcs[this.state.index],
                top: this.state.topSrcs[this.state.index]
              }}
              key={this.state.index}
              title="AdSlot"
              src={this.state.iframeSrcs[this.state.index]}
              height={this.state.heightSrcs[this.state.index]}
              width={this.state.widthSrcs[this.state.index]}
              scrolling="no"
              frameborder="0"
              allowFullScreen="true"
            />
          ) : (
              ""
            )}
        </div>
        <div>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 129 }}
            onClick={() => this.handleClick.bind(this)}>160x600</Button>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 509 }}
            onClick={() => this.setState({ index: 3, visibility: true })}>728x90</Button>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 888 }}
            onClick={() => this.setState({ index: 2, visibility: true })}>468x60</Button>
          <Button variant="outline-info" color="primary" size="lg" style={{ position: "absolute", left: 1267 }}
            onClick={() => this.setState({ index: 0, visibility: true })}>300x250</Button>

        </div >
      </div >
    );
  }
}
export default PubblicitaPulsanti;

Can anyone help me?

Jeremy Harris · Accepted Answer · 2020-02-24 14:32:11Z

1

You can create a wrapper method that calls both:

handleClick = (evt) => {
   this.setState({ index: 1, visibility: true });
   this.timer();
}

And update your button to have:

onClick={this.handleClick}

EDIT:

You might be having a race condition where you set visibility to true, but then the timer sets it to false. In that case, you can call the timer after the initial state change is complete:

this.setState({ index: 1, visibility: true }, () => {
   // Run timer as a callback here:
   this.timer();
});

edited Feb 24, 2020 at 14:32

answered Feb 24, 2020 at 13:23

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

campanto Over a year ago

I have tried this solution, but it doesn't work. It does not change the state.

Jeremy Harris Over a year ago

Depending on how your project is setup, you may need to do this.handleClick.bind(this) so that this is referencing the component.

campanto Over a year ago

I updated the question by entering the complete component code. Even entering "bind (this)" doesn't work. Do you see something wrong? Thank you so much for the time you are dedicating to me.

Jeremy Harris Over a year ago

See my edit. Also, there was an extra curly brace on the setState call, so that may also be the issue. Does your console not show any errors?

Collectives™ on Stack Overflow

Onclick with two functions- React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related