结合使用带有ReactJS的ES5开发,可以将组件描述如下:
var MyComponent = React.createClass({ alertSomething: function(event) { alert(event.target); }, render: function() { return ( <button onClick={this.alertSomething}>Click Me!</button> ); } }); ReactDOM.render(<MyComponent />);
在此的示例this引用对象本身,这是预期的自然行为。
this
题
我的问题是:
如何使用ES6创建组件?
class MyComponent extends React.Component { constructor(props) { super(props); } alertSomething(event) { alert(event.target); } render() { return ( <button onClick={this.alertSomething.bind(this)}>Click Me!</button> ); } } ReactDOM.render(<MyComponent />);
知道在JavaScript中this使用new运算符时会引用实例化对象本身,因此有人可以告诉我使用bind的真正目的是什么?这和React的内部机制有关吗?
bind只是核心javascript。这是绑定事件的工作方式。这不是一个React概念。
bind
以下文章对此进行了很好的解释。
JavaScript中的有界函数是绑定到给定上下文的函数。这意味着无论您如何调用,调用的上下文都将保持不变。 要在常规函数之外创建有界函数,请使用bind方法。bind方法将要绑定函数的上下文作为第一个参数。其余参数是将始终传递给该函数的参数。结果返回一个有界函数。
JavaScript中的有界函数是绑定到给定上下文的函数。这意味着无论您如何调用,调用的上下文都将保持不变。
要在常规函数之外创建有界函数,请使用bind方法。bind方法将要绑定函数的上下文作为第一个参数。其余参数是将始终传递给该函数的参数。结果返回一个有界函数。
http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react- component-classes/
另外,顺便提一下,您应该在构造函数中而不是在render方法中进行所有事件绑定。这将防止多次绑定调用。
这是有关该主题的另一条很好的信息。他们说:
我们建议您将事件处理程序绑定到构造函数中,这样对于每个实例它们都只绑定一次
https://facebook.github.io/react/docs/reusable- components.html