Reactjs可以像改变道具一样改变onclick函数的名字 [英] Reactjs possible to change onclick function name like changing props

问题描述

可以像更改道具一样更改onclick函数，例如将'props 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> 
< / div>按钮onClick = {this.eventHandler_One}>按钮< /按钮> 
< / div> ; 
）; 
} 
}）; 
 
 React.render（
< SmallMessageBox message =new messageonClick =new onClick function for event2/> gt，document.getElementById（'react-container'），
 function（）{
 console.log（'render'后）; 
} 
）; 
  

解决方案

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

另外，在很多情况下，您必须使用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（只有当props.onClick没有被指定时，我才会被执行）; 
} 
} 
}，
 
 eventHandler：function（）{
 
}，
 
 render：function（）{
 
 return（
< div> 
< small> {this.props.message}< / small> 
 < button onClick = {this.props.onClick}>按钮< / button> 
< / div> 
）; 
} 
}）; 
 
 React.render（
< SmallMessageBox onClick = {function（）{console.log（remove me to get other console.log）;}} message =new message />，document.getElementById（'react-container'），
 function（）{
 console.log（'render'后）; 
} 
）; 
  

我也鼓励你用他们的类型隐式地指定你的道具。您可以在此处找到更多信息。

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

解决方案

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.

这篇关于Reactjs可以像改变道具一样改变onclick函数的名字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！