Have a click
<a onClick={this.toggle.bind(this)} className="link-open-inner-comments greenlink">CLICK</a>
Have a code to show another div
toggle() {
$( ".link-open-inner-comments" ).on( "click", function() {
$(this).next().toggle();
$(this).toggleClass( "bounce" );
});
}
It working when I click only 2 times. How to modify that click working at first time?
It working when I click only 2 times. How to modify that click working at first time?
Right: The first click is hooking up an event handler. Then the second click triggers that handler (and adds another handler). That's almost certainly not what you want to do.
You probably want to just do what's inside the handler. To do it the way you're doing it, you'd usually use a ref:
<a ref={input => this.$input = $(input)} onClick={this.toggle.bind(this)} className="link-open-inner-comments greenlink">CLICK</a>
Then:
toggle() {
this.$input.next().toggle();
this.$input.toggleClass( "bounce" );
}
Live example:
class Example extends React.Component {
constructor(...args) {
super(...args);
this.toggle = this.toggle.bind(this); // Do this once, not on every render
}
toggle() {
this.$input.next().toggle();
this.$input.toggleClass( "bounce" );
}
render() {
return <div>
<a ref={input => this.$input = $(input)} onClick={this.toggle} className="link-open-inner-comments greenlink">CLICK</a>
<div style={{display: "none"}}>The thing that gets shown</div>
</div>;
}
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);.bounce {
color: green; /* Just to show that we add the class */
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>But, that's not how you want to do it with React. Instead, have your component change its state, and use that state in the template of the element. Like this:
class Example extends React.Component {
constructor(...args) {
super(...args);
this.state = {open: false};
this.toggle = this.toggle.bind(this); // Do this once, not on every render
}
toggle() {
this.setState(state => ({open: !state.open}));
}
render() {
return <div>
<a onClick={this.toggle} className={`${this.state.open ? 'bounce ' : ''}link-open-inner-comments greenlink`}>CLICK</a>
{this.state.open ? <div>The thing that gets shown</div> : null}
</div>;
}
}
class Example extends React.Component {
constructor(...args) {
super(...args);
this.state = {open: false};
this.toggle = this.toggle.bind(this); // Do this once, not on every render
}
toggle() {
this.setState(state => ({open: !state.open}));
}
render() {
return <div>
<a onClick={this.toggle} className={`${this.state.open ? 'bounce ' : ''}link-open-inner-comments greenlink`}>CLICK</a>
{this.state.open ? <div>The thing that gets shown</div> : null}
</div>;
}
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);.bounce {
color: green; /* Just to show that we add the class */
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>You have lots of options for what to do with the thing you're toggling. Including / not including it as above is one option, but there are more sophisticated options if rendering the thing is expensive.
this. but you could surely have figured that out. I've added a live example, as well as an example of a more React way to do this.you are binding twice... one in inline onclick and other in toggle() method there is a click event bindings.
toggle() method will keep binding the click event multiple times.
Remove $( ".link-open-inner-comments" ).on( "click", function() { should fix the problem
toggle(event) {
$( event.target ).next().toggle();
$( event.target ).toggleClass( "bounce" );
});
}
$( event.target )event argument in toogle(event)?