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?
