Question

可以更改onclick功能，例如更改道具，例如将'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

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

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

根据你的例子，它应该是这样的：

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。

Reactjs可以更改onclick函数名称，如更改道具

1 个答案: