Onclick event handler with passing this in reactjs

Question

My component is as below:

import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
render() {
return (
    <div className="col-md-12 slide-row">
        <div className="col-md-12 overview-about-property">
            <div className="expandabletext less">
                <div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
            </div>
            <div className="showmore"> Show More </div>
        </div>
    </div>
);
}
}

I want to call function say showmorefunct() passing clicked handler like this in jquery. How can I do this?

Boky · Accepted Answer · 2016-12-06 11:02:14Z

2

You can bind you function and pass params which you want, if you want to. You can do something like :

class Test extends React.Component {
    handleClick(param, e){
        console.log(e);
        console.log(param);
    }

    render(){
        return (
        <div className="showmore" onClick={this.handleClick.bind(this, "Some param if you need it")}> Show More </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Here is fiddle.

answered Dec 6, 2016 at 11:02

Boky

12.1k30 gold badges104 silver badges173 bronze badges

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

4 Comments

user1820017 Over a year ago

will that work in browser, I tried does not console log for me

Boky Over a year ago

@user1820017 Of course. Check the fiddle. Open the console and click on Show More.

user1820017 Over a year ago

Fiddle works, but somehow my application having some issue

Boky Over a year ago

@user1820017 Do you get any errors? Can you make a fiddle of your app?

Mihir · Accepted Answer · 2016-12-06 12:48:57Z

UPDATE http://jsfiddle.net/jwm6k66c/1517/

I don't quite really understand your question, but I imagine you want this-

import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
  constructor(props) {
    super(props)
    this.showMoreFunct = this.showMoreFunct.bind(this)
  }
  showMoreFunct() {
    alert('Show more clicked!')
  }
  render() {
    return (
      <div className="col-md-12 slide-row">
        <div className="col-md-12 overview-about-property">
            <div className="expandabletext less">
              <div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
              </div>
            <div className="showmore"> <span onClick={this.showMoreFunct}>Show More</span> </div>
        </div>
      </div>
    );
  }
}

You can replace span with a or button. You just need to specify the function you want to call to onClick prop. React will call it automatically when the user clicks on that span.

Collectives™ on Stack Overflow

Onclick event handler with passing this in reactjs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related