Невозможно определить методы стрелок в реагирующих компонентах

Question

Я пытаюсь преобразовать все методы моих компонентов реагирования в функции стрелок, чтобы мне не приходилось связывать их заранее. но всякий раз, когда я переключаю метод на этот синтаксис, реакция начинает давать ошибку. Тем не менее, функции анонимной стрелки работают нормально. Например. onClick = {(e) => {e.preventDefault ()}} отлично работает.

Я не уверен, но я думаю, что это может быть проблема с конфигурациями ответов или 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 / компоненты / статистика / Statistics.jsx Строка 132: «handleChangeStart» не определен no-undef

Поиск по ключевым словам, чтобы узнать больше о каждой ошибке.

Редактировать:

Я изменил свою версию зависимости react-script с 1.0.7 на 3.0.1 в моем файле package.json, и ошибка исчезла. Спасибо всем за помощь.

Answer 1

Вы устанавливаете поле класса handleChangeStart (в настоящее время поддерживается не везде), которое не будет определять функцию-прототип класса MyComponent.Если вы хотите использовать функции стрелок, вы можете сделать это несколькими способами, самый простой из которых:

1. Использование конструктора.

   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 => {
         // ...
       };
     }
   
     // ...
   }
   

2. Использование prototype.

   class MyComponent extends React.Component {
     // ...
   }
   
   MyComponent.prototype.handleChangeStart = startDate => {
     // ...
   };
   

Answer 2

Я не вижу вашей реализации функций стрелок, которые бы выдавали ошибку. Я предполагаю, что вы используете это ключевое слово в своих функциях. Функция стрелки Javascript не захватывает вызывающую сторону на этой клавиатуре, в то время как обычная функция, объявленная с ключевым словом function , будет иметь this в качестве вызывающей стороны.

Всякий раз, когда вы вызываете это в своей функции стрелки, она будет представлять this во внешней области видимости, иногда это то, что вы хотите, но в большинстве случаев это приведет к некоторой ошибке.

Answer 3

Можете ли вы попробовать это? Я новичок, чтобы реагировать, но это сработало для меня

const handleChangeStart = (startDate) => {

    }