setInterval within onClick in React

Question

UPDATE: I am very new to React(and js) and playing around with it. What I want to do is that you can only click on the image every 10 secs or something. How do I do it? I am not sure where to reset isClickable.

I have something like this:

 Var ClickableImage = React.createClass({ getInitialState: function(){ return { isClickable: false, counter: 0 }; }, componentDidMount: function(){ // componentDidMount is called by react when the component // has been rendered on the page. We can set the interval here: setTimeout(() => { this.setState({ isClickable: true, }); }, 1000); }, handleClick: function() { this.setState({ counter: this.state.counter+1 }); }, render: function(){ var imgStyle = { width: '80%', height: '80%', backgroundColor: "#4ECDC4" }; var counterStyle = { width: '80%', height: '80%', backgroundColor: "#674172" }; const optionalOnClick = this.state.isClickable ? { onClick: this.handleClick, isClickable: false } : {}; return( <div> <div style = {imgStyle}> <img src={this.props.src} width="100%" height="80%" onClick={this.optionalOnClick}/> </div> <div style = {counterStyle}> {this.state.counter} </div> </div> ) }

});

ReactDOM.render(<ClickableImage src='http://vignette1.wikia.nocookie.net/parody/images/2/27/Minions_bob_and_his_teddy_bear_2.jpg/revision/latest?cb=20150507162409' />, document.getElementById('app'));

Even though you have changed the question - solution is still very similar: after a click reset the state and set it back in the timer. — zerkms
– zerkms, Commented Feb 3, 2016 at 0:55
I tried to do that but its still now working. I updated what my full code looks like in the question itself. Would really appreciate any help. — techGirl
– techGirl, Commented Feb 3, 2016 at 1:20
1. You should have {...optionalOnClick} - it expands the object to the component properties 2. optionalOnClick should not have anything but onClick 3. After you do that you'll likely to have a problem with this in the click handler — zerkms
– zerkms, Commented Feb 3, 2016 at 1:25
Thanks for pointing that out! :) So now the image is only clickable after the specified time in the setTimeout but after that you can click at anytime. Any idea what I am doing wrong here? — techGirl
– techGirl, Commented Feb 3, 2016 at 1:35

zerkms · Accepted Answer · 2016-02-02 22:51:55Z

That's how I would do that:

class ClickableImage extends Component { constructor(...args) { super(...args); this.state = { isClickable: false, }; } componentDidMount() { setTimeout(() => { this.setState({ ...this.state, isClickable: true, }); }, 1000); } handleClick() { // ... } render() { const optionalOnClick = this.state.isClickable ? { onClick: this.handleClick, } : {}; return ( <img src={this.props.src} width="100%" height="80%" {...optionalOnClick} /> ); } }

Explanation:

when the component is mounted - use setTimeout to change the state to isClickable: true
in render function check if isClickable is set, if so - add a handler.

I am not familiar with ES6 so this is a little difficult for me to understand. I looked things up and tried to do it the way you suggested and I am getting a "Component is not defined" error.
Well, convert it to a non-ES6 then. The first line simply creates a component

Collectives™ on Stack Overflow

setInterval within onClick in React

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related