Рефакторинг реагирует на эту привязку
у меня есть этот код
class BottomPanel extends React.Component<Props, {}> {
constructor(props) {
super(props);
this.dropDownUpdate = this.dropDownUpdate.bind(this);
}
dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
Мне было интересно, смогу ли я провести рефакторинг
this.dropDownUpdate = this.dropDownUpdate.bind(this);
к
this.dropDownUpdate = this.dropDownUpdate;
если да, то почему или почему бы и нет? Я просто видел, что где-то так делают
this.dropDownUpdate = this.dropDownUpdate;
Я не уверен, смогу ли я применить это к своему коду.
да, я думаю, пока это работает. Но я действительно не хочу использовать его, если я не понимаю, почему.
разве это не работает без строки this.dropDownUpdate = this.dropDownUpdate.bind(this);?
Ответы 3
Просто определите свою функцию, как показано ниже.
dropDownUpdate = (событие) => { .... }
Не нужно связываться в конструкторе
Это работает, только если вы используете плагин transfrom-class-properties babel (который поставляется с приложением create-react-app)
Поскольку dropDownUpdate — это функция со стрелкой, она должна работать, как и ожидалось, без
this.dropDownUpdate = this.dropDownUpdate; Или
this.dropDownUpdate = this.dropDownUpdate.bind(this);
В стрелочных функциях значение this связано лексически, в отличие от обычных функций, где значение this изменяется в зависимости от контекста, в котором вызывается функция.
Смотрите это: stackoverflow.com/questions/43600967/…
Спасибо за упоминание! @user1176111 user1176111 Проверьте плюсы и минусы каждого из них.
Одна вещь, о которой нужно знать, это то, что когда вы пишете:
class BottomPanel extends React.Component<Props, {}> {
dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}
Этот (в настоящее время) недопустимый синтаксис ES6. Вы не можете присвоить переменную класса со знаком равенства таким образом. Причина, по которой это работает, заключается в плагине transform-class-properties babel, подробнее об этом ниже.
Смотрите этот вопрос и ответ для более подробной информации:
Альтернативы переменной класса ES6
Технически правильный способ объявить переменную класса — использовать ключевое слово this, например:
class BottomPanel extends React.Component<Props, {}> {
constructor(props) {
this.dropDownUpdate = this.dropDownUpdate.bind(this)
}
dropDownUpdate(e) {
this.setState({ dropDownValue: e.currentTarget.textContent });
}
}
Почему вы не можете просто сделать:
class BottomPanel extends React.Component<Props, {}> {
constructor(props) {
this.dropDownUpdate =e => this.setState({ dropDownValue: e.currentTarget.textContent });
}
}
см. этот пост: Могу ли я использовать функцию стрелки в конструкторе компонента реакции?
Теперь дело в том, что я предполагаю, что вы используете приложение Create React, которое поставляется с плагином transform-class-properties babel, поэтому первое объявление работает.
Взгляните на этот вопрос, чтобы узнать, почему вы хотели бы использовать трюк this.dropDownUpdate = this.dropDownUpdate.bind(this);. В этом нет необходимости, но вы столкнетесь с проблемой отладчика (браузер не знает о преобразовании transform-class-properties babel).
Отладчики Chrome, Firefox не отображают правильное значение для «это» в приложении реакции
В противном случае вы можете просто очистить свои методы класса, например:
class BottomPanel extends React.Component<Props, {}> {
dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}
Ты это пробовал?