Javascript Can'；t在react组件中定义箭头方法

我正在尝试将react组件的所有方法转换为arrow函数，这样我就不必事先绑定它们。但每当我将一个方法转换为该语法时，react就会开始给出错误。但是，匿名箭头函数可以正常工作。例如，onClick={（E）=>{E.preventDefault（）}}工作正常

我不确定，但我认为可能是react或eslintrc配置的版本有问题

这是我的密码：

class MyComponent extends React.Component {
    handleChangeStart = startDate => {
        //this method is giving error for not being defined
    }

    handleChangeEnd(endDate) {
        //method that doesn't gives error.
    }
    render(){
        <DatePicker
             id='start_dt'
             className="border border-primary text-center"
             selected={this.props.startDate}
             selectsStart
             startDate={this.props.startDate}
             endDate={this.props.endDate}
             onChange={this.handleChangeStart}
             dateFormatCalendar={"MMM YYYY"}
             dropdownMode={"select"}
         />
        <DatePicker
             id='start_dt'
             className="border border-primary text-center"
             selected={this.props.startEnd}
             selectsEnd
             startDate={this.props.startDate}
             endDate={this.props.endDate}
             onChange={this.handleChangeEnd}
             dateFormatCalendar={"MMM YYYY"}
             dropdownMode={"select"}
         />
    }
}

未能编译

./src/components/stats/Statistics.jsx 第132行：“handleChangeStart”未定义无未定义

搜索关键字以了解有关每个错误的更多信息

编辑：

---

我在

package.json

文件中将我的

react脚本

依赖项版本从

1.0.7

更改为

3.0.1

，错误消失了。谢谢大家的帮助。

你能试试这个吗？我是个新手，但这对我很有效

const handleChangeStart = (startDate) => {

    }

---

我看不出您的arrow函数实现会出现错误。我假设您在函数中使用此关键字。Javascript arrow函数不会捕获此键盘中的调用者，而使用function关键字声明的常规函数将使用this作为调用者

---

无论何时在arrow函数中调用this，它都会在外部作用域中表示this，有时这是您想要的，但大多数情况下这会给您带来某种错误。

您正在设置类字段

handleChangeStart

（当前不支持任何地方），它不会在

MyComponent

类上定义原型函数。如果您想使用箭头功能，可以通过多种方式实现，最简单的方法是：

使用构造函数

class MyComponent extends React.Component {
  constructor(...args) {
    // pass forward any arguments to the react component constructor
    super(...args);

    // keep in mind that this doesn't set the prototype, but a property
    this.handleChangeStart = startDate => {
      // ...
    };
  }

  // ...
}

使用

原型

class MyComponent extends React.Component {
  // ...
}

MyComponent.prototype.handleChangeStart = startDate => {
  // ...
};

---

你能发布你的babel配置吗？可能是重复的，我想你需要配置你的webpack/babel来编译ES6 arrow函数。将

@babel/preset env

添加到你的

webpack.config.js

presets

数组中。@Nick Zuber，如何做到这一点。指定

var/let/const

将不适用于

classFeilds

。阅读更多关于。另外，

（）

一个单参数箭头函数是不需要的。@AmitDas-Ahh不知道这一点。t尝试将答案选项仅限于

解决方案

。你的回答应该是评论。

class MyComponent extends React.Component {
  // ...
}

MyComponent.prototype.handleChangeStart = startDate => {
  // ...
};