Reactjs possible to change onclick function name like changing props

Question

Possible to change onclick function like changing props, like changing 'props message' to 'new message' ?

For example:

var SmallMessageBox = React.createClass({

  getDefaultProps: function() {
    return {
      message: 'props message',
      onClick: 'this.eventHandler_Two'
    }
  },

  eventHandler_One: function(){
    console.log('event1');
  },

  eventHandler_Two: function(){
    console.log('event2');
  },

  render: function(){

    return (
      <div>
        <small>{this.props.message}</small>
        <button onClick={this.eventHandler_One}>button</button>
      </div>  
    );
  }
});

React.render(
  <SmallMessageBox message="new message" onClick="new onClick function for event2" />, document.getElementById('react-container'),
  function(){
    console.log('after render');
  }
);

Sviatoslav Zalishchuk · Accepted Answer · 2016-03-15 23:17:58Z

0

Yes, components can be supplied with properties of type function. You can either bind event handlers directly to functions passed through props or do something in your internal component method, before executing the prop function. Please note, that you cannot change definition of supplied function, once target component was initialized, it will not be updated.

Also, in many cases you must use bind on your passed in function to maintain proper context.

Here's how it should look like in accordance with your example:

var SmallMessageBox = React.createClass({



  propTypes: {
    message: React.PropTypes.string.isRequired,
    onClick: React.PropTypes.func
  },

  getDefaultProps: function() {
    return {
      message: 'props message',
      onClick: function() {
        console.log("I will be executed, only if props.onClick was not specified");
      }
    }
  },

  eventHandler: function() {

  },

  render: function() {

    return (
      <div>
        <small>{this.props.message}</small>
        <button onClick={ this.props.onClick }>button</button>
      </div>  
    );
  }
});

React.render(
  <SmallMessageBox onClick={function() { console.log( "remove me to get the other console.log"); }} message="new message"/>, document.getElementById('react-container'),
  function(){
    console.log('after render');
  }
);

I would also encourage you to implicitly specify your props with their type. You can find more information here.

edited Mar 15, 2016 at 23:17

answered Mar 15, 2016 at 22:06

Sviatoslav Zalishchuk

7396 silver badges8 bronze badges

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

4 Comments

Shin Over a year ago

Thanks, hmm I don't getting console log, when I click, any idea?

Sviatoslav Zalishchuk Over a year ago

Yeah, in return { onClick: this.eventHandler } this is pointing to the wrapping Object and not the component. Just assign this to a variable context in getDefaultProps and then reference it: onClick: context.eventHandler. I've updated example in my answer for convenience.

Shin Over a year ago

jsbin.com/cayogumegu/1/edit?html,js,console,output can you try here, trying to get that console log msg :) ?

Sviatoslav Zalishchuk Over a year ago

Updated the JSbin. For some weird reason unknown to me, getDefaultProps does not play nice with references to this. I use ES6 syntax and define components in constructor rather than create instances with createComponent and don't have that problem there. If you define your function inline, works as expected.

Collectives™ on Stack Overflow

Reactjs possible to change onclick function name like changing props

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related