Question

在这个组件中，如果它不是箭头函数，我无法通过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;

Answer 1

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

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

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

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

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

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

1 个答案: