Reactjs 可以像更改道具一样更改 onclick 函数名称

Question

可以改变onclick功能，比如改变props，比如把'props message'改成'new message'？

例如：

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');
  }
);

Answer 1

是的，可以为组件提供函数类型的属性。在执行 prop 函数之前，您可以将事件处理程序直接绑定到通过 props 传递的函数，或者在内部组件方法中执行某些操作。请注意，您不能更改所提供函数的定义，一旦目标组件被初始化，它将不会被更新。

此外，在许多情况下，您必须在传入的函数上使用绑定来维护正确的上下文。

根据您的示例，它应该是这样的：

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');
  }
);

我还鼓励您隐式指定您的道具及其类型。您可以找到更多信息here。