为什么“this”在某些情况下绑定不同,但React中的其他情况相同?

时间:2017-12-04 13:24:32

标签: javascript reactjs ecmascript-6 this

在这个组件中,如果它不是箭头函数,我无法通过this.functionName调用render方法中的函数。但是,我能够在箭头函数和常规函数中有效地调用this.setState。为什么在某些情况下“this”会有所不同,但在像这样的React组件的其他情况下看似相同?

import React from 'react';

class Address extends React.Component {

state = {
    fullAddress: "5001"
}

componentDidMount() {
    this.setState({
        fullAddress: "hello"
    })
}

hello = () => {
    this.setState({
        fullAddress: "hello1"
    })
}

logMessage() {
    console.log(this.state.fullAddress);
}

 render() {
   return (
     <div className="address">
       {this.state.fullAddress}
       <input type="button" value="Log" onClick={this.hello} />
     </div>
   );
 }
}

export default Address;

1 个答案:

答案 0 :(得分:3)

在您的示例中,logMessage可能会中断,因为您需要为其指定this上下文。

在这种情况下,只需在bind的构造函数中Address就像这样:

class Address extends Component {
  constructor(props) {
    super(props)

    this.logMessage = this.logMessage.bind(this)
  }
} 

第二种方法与您使用hello的箭头函数相同。 Arrow functions保留您当前的上下文(这),这就是为什么您可以访问this.setState内部hello的正文。