react定义函数报错

Question

报错代码如下：（用箭头函数）

handlePublish2 = () => {
    console.log(this.state.comment)
}

'handlePublish2' is not defined  no-undef
Search for the keywords to learn more about each error.

换了种写法就没报错：

handlePublish2 () {
    console.log(this.state.comment)
}
// 不过要手动绑定一下，感觉没个函数都要绑定，好麻烦=。=
this.handlePublish = this.handlePublish.bind(this)

为什么用箭头函数就不行额。。我看网上的代码都是可以的，求解

完整代码：

import React, { Component } from 'react';

export default class Publish extends Component {
  constructor() {
    super()
    this.state = {
      username: '',
      comment: '',
      commentArr: []
    }
    this.handlePublish = this.handlePublish.bind(this);
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleCommentChange = this.handleCommentChange.bind(this);
  }

  handlePublish() {
    const {username, comment} = this.state
    if (!username) {
      alert('请输入用户名')
      return
    }
    if (!comment) {
      alert('请输入内容')
      return
    }
    this.state.commentArr.push({
      username: this.state.username,
      comment: this.state.comment
    })
    this.reset()
    this.forceUpdate()
  }

  handleNameChange(e) {
    this.setState({
      username: e.target.value
    })
  }

  handleCommentChange(e) {
    this.setState({
      comment: e.target.value
    })
  }

  reset() {
    this.setState({
      username: '',
      comment: '',
    })
  }

  handlePublish2 = () => {
    console.log(this.state.comment)
  }

  render() {
    let commentArr = this.state.commentArr.map((comment ,idx) => {
      return (
        <div className="Comment" key={idx}>
          <span>{comment.username}</span>--
          <span>{comment.comment}</span>
        </div>
      )
    })
    return (
      <div className="Publish">
        <div className="item">
          <label>用户名</label>
          <input type="text" value={this.state.username} onChange={this.handleNameChange}/>
        </div>
        <div className="item">
          <label>内容</label>
          <textarea value={this.state.comment} onChange={this.handleCommentChange}></textarea>
        </div>
        <div className="item">
          <button onClick={this.handlePublish}>发布</button>
        </div>
        {commentArr}
      </div>
    )
  }
}

Answer 1

提示说的很清楚啊，你没有定义变量，就直接赋值了。

加上声明：

const handlePublish2 = () => {
    console.log(this.state.comment)
}

如果不是变量声明的问题。那就是你写的顺序问题了。
function方式定义的，会提前，写在哪里都可以。
但是赋值形式的，必须要写在前面才行。看看是不是先调用，后声明的。

Answer 2

可能和你的babel plugin有关
你用的class内直接定义属性，是property initializers语法
目前处于 stage2 状态
你可以通过点击这个链接看到，当前的提案进度。。
而关于你的语法提案在这

Answer 3

最后用了个蜜汁方法，把报错的eslint规则禁用掉了。。。
感谢楼上回答问题的大神。

"no-undef": 0

Answer 4

首先，ES6的解构特性：

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

所以：

handlePublish2 () {
    console.log(this.state.comment)
}
// 等同
handlePublish2 ：function () {
    console.log(this.state.comment)
}

this.handlePublish = this.handlePublish.bind(this)的目的就是把handlePublish指向定义时的作用域即组件本身，而不是全局（window）