为什么我的组件的render（）方法是唯一默认具有正确值'this'的方法？

我只是想知道为什么render（）默认将'this'设置为'正确'或直观的值，但随后我在组件上定义的任何其他方法必须明确设置'this'。为什么我的组件的render（）方法是唯一默认具有正确值'this'的方法？

例如：

class App extends React.Component { 

    constructor (props) { 
     super(props); 
    } 

    onFormSubmit (e) { 
     e.preventDefault(); 
     console.log(this); 
    } 

    render() { 

     console.log(this); 

     return (
     <div> 
      <form onSubmit={this.onFormSubmit}> 
      <input type="search"/> 
      <button>Submit</button> 
      </form> 
     </div> 
    ); 
    } 

    } 

    ReactDOM.render(
    <App/>, 
    document.getElementById('app') 
);

上述控制台输出是

App {props: Object, context: Object...} 
null

为什么呢？有没有什么方法可以使this默认在两种情况下都是指App？或者我只需要在constructor中继续写this.onFormSubmit = this.onFormSubmit.bind(this);？

也许这是没有意义的想用默认这种行为（我很新的节目！），但如果是这样的话请解释为什么:)

所有最优秀的

[编辑]另外...为什么在onFormSubmit函数中引用this时返回null？

来源

2017-04-21 NoobOfNoobs

因为其它功能用于转换数据..和过渡是异步 –

的'值this'取决于函数是如何被调用。不是它是如何定义的。参见：http://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628?s=1|4.2098#13441628 – slebetman

为了以防万一，你试过<form onSubmit={this.onFormSubmit.bind(this)}>？

你this返回null，因为你只是调用组件App定义的方法.onFormSubmit()（由你的第一个执行console.log返回：应该没有构造

内结合对于编辑工作线）没有任何上下文。

我邀请你来检查这个ressources：

为了了解.bind/.CALL /。适用方法

http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/

一个很好的教程阵营基础，在这段视频中，他解释了为什么你应该总是使用.bind（）来避免这些问题的背景

https://www.youtube.com/watch?v=_D1JGNidMr4&index=5&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

来源

2017-04-21 07:43:19 Manu

Manu，感谢您的这些链接。那篇关于bind（），call（）和apply（）方法的文章特别有用，在那个网站上也有一篇关于'this'的文章，这有助于。我认为我学到的是'this'指的是调用'this'被引用的函数的对象。 – NoobOfNoobs

是的，因为当你调用objectA中定义的方法时，用不同的上下文（从objectB）处理它的唯一方法是绑定或调用objectB的'this'上下文！像'var a = {name：“Manu”，showName：（）=> {return this。}} //// 'var b = {name：“user3624937”}'//// 'a.showName.bind（b）'将返回“user3624937” – Manu

非常好，非常感谢您很多 - 这有帮助！ – NoobOfNoobs

为什么我的组件的render（）方法是唯一默认具有正确值'this'的方法？

回答

相关问题