Question

我非常有信心我做错了，我无法安装console.log this.state.greeting但是如果我在返回语句中引用this.state.greeting它有效，我很困惑为什么它不在班级方法中工作

class Test extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      greeting: 'test'
    }
  }

  greeting () {
    console.log(this.state.greeting)
  }

  render () {
    return (
      <p onClick={this.greeting}>test</p>
    )
  }

}

export default Test

Answer 1

你需要绑定它。这有两个选择：

class Test extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      greeting: 'test'
    }
  }

  greeting () {
    console.log(this.state.greeting)
  }

  render () {
    return (
      <p onClick={this.greeting.bind(this)}>test</p>
    )
  }
}

// OR THIS

class Test extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      greeting: 'test'
    }
    this.greeting = this.greeting.bind(this);
  }

  greeting () {
    console.log(this.state.greeting)
  }

  render () {
    return (
      <p onClick={this.greeting}>test</p>
    )
  }

}

Answer 2

这个实际上有两个技巧。您可以在构造函数中使用bind函数，如下所示：

this.greeting = this.greeting.bind(this);

或者如果你使用es6和presets正确设置了babel，那么你可以通过使用匿名lambdas更好地完成它。在.babelrc文件中，它应如下所示：

{
    "presets": [
        "react",
        "es2015",
        "stage-1"
    ]
}

并安装了正确的依赖项，然后您可以使用这样的es6函数：

class Test extends React.Component {

  constructor (props) {
    super(props);

  }

  greeting = () => {
    console.log(this.state.greeting)
  }

  render = () => {
    return (
      <p onClick={this.greeting}>test</p>
    );
  }

}

export default Test

我个人喜欢第二种选择。它不会使你的构造函数膨胀，并且匿名lambdas每次都比函数更好。

es6类方法无法访问本地状态？

2 个答案: