Изменение состояния класса из импортированной функции в ReactJS - PullRequest
Новая
       22

Изменение состояния класса из импортированной функции в ReactJS

0 голосов
/ 29 мая 2019

Я пытаюсь изменить состояние класса импортированного именованного компонента, поэтому мне нужно написать код только один раз.Это вообще возможно?

У меня есть 3 файла (Логин, Забыли пароль, Регистрация).На ВСЕХ этих файлах я прослушиваю событие "onChange" в полях ввода, которые все делают то же самое, что показано ниже:

Метод onChange: 

onChange = (e) => {
    this.setState(() => ({ errors: {} }));

    let fields = this.state.fields;
    fields[e.target.name] = e.target.value;
    this.setState(() => {
        return {
            fields
        }
    });
};

Мне бы очень хотелось импортировать этот метод как именованный вместе с другими, которые уже работают: 

import { onFocus, onBlur, onChange } from './Utils/Input';

Проблема в том, что (как показано выше в коде onChange) мне нужно обновитьсостояние класса из этого метода.

Возможно ли это вообще?Я очень новичок в React, так что я могу поступить совершенно неправильно.

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Когда вы пытаетесь обновить состояние компонента, вы всегда обновляете состояние, относящееся к определенному этому.

Вы пытаетесь писать * функции, которые не зависят от экземпляров, с которыми вы работаете.Поэтому не имеет смысла использовать «this» внутри них.

Вы можете передать экземпляр класса функции on следующим образом:

https://codesandbox.io/s/focused-cache-zzfvp

1 голос
/ 29 мая 2019

Используйте метод, привязав к нему контекст изнутри класса, как это

onChange.bind(this)

...