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-15T23:17:58.247

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.

Thanks, hmm I don't getting console log, when I click, any idea? — Shin, Mar 15 '16 at 22:38
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. — Sviatoslav Zalishchuk, Mar 15 '16 at 22:51
http://jsbin.com/cayogumegu/1/edit?html,js,console,output can you try here, trying to get that console log msg :) ? — Shin, Mar 15 '16 at 22:59
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. — Sviatoslav Zalishchuk, Mar 15 '16 at 23:16

Reactjs possible to change onclick function name like changing props

1 Answers1

Linked