Question

我试图将我的react组件的所有方法都转换为箭头函数，这样我就不必事先绑定它们。但是每当我将一种方法转换为该语法时，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"}
         />
    }
}

这是我的eslintrc文件：


{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint"
}

无法编译。

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

搜索关键字以详细了解每个错误。

编辑：

我在react-script文件中将1.0.7的依赖版本从3.0.1更改为package.json，错误消失了。谢谢大家的帮助。

Answer 1

您正在设置类字段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 => {
      // ...
    };
  }

  // ...
}

使用prototype。

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

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

Answer 2

您可以试试吗？我是新来的反应者，但这对我有用

const handleChangeStart = (startDate) => {

    }

Answer 3

我看不到您实现的箭头功能会产生错误。我假设您在函数中使用 this 关键字。 Javascript箭头函数无法捕获 this 键盘中的调用者，而使用 function 关键字声明的常规函数会将this作为调用者。

每当您在箭头函数中调用此函数时，它将在外部作用域中表示 this ，有时这就是您想要的，但是大多数情况下这会给您带来某种错误。

无法在React组件中定义箭头方法

3 个答案: