Gdzie zadeklarować zmienną w respond js


Próbuję zadeklarować zmienną w klasie React-js. Zmienna musi być dostępna w różnych funkcjach. To jest mój kod.
class MyContainer extends Component {
constructor(props) {
super(props);
this.testVariable= "this is a test";// I declare the variable here
}
onMove() {
console.log(this.testVariable);//I try to access it here
}
}

W onMove
this.testVariable
jest niezdefiniowane. Wiem, że mogę przypisać wartość do stanu, ale nie chcę tego robić, ponieważ za każdym razem, gdy wartość się zmieni, zostanie wywołana funkcja
render ()
, co nie jest konieczne. Jestem nowicjuszem, aby zareagować, czy zrobiłem coś złego?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Używanie składni ES6 w React nie wiąże
this
z funkcjami niestandardowymi, jednak wiąże
this
z metodami cyklu życia komponentów.
Dlatego zadeklarowana funkcja nie będzie miała tego samego kontekstu co klasa, a próba uzyskania dostępu do
this
nie da Ci tego, czego oczekujesz.
Aby uzyskać kontekst klasy, należy powiązać kontekst klasy z funkcją lub użyć funkcji strzałkowych.
Metoda 1 dla powiązania kontekstu:
class MyContainer extends Component { constructor(props) {
super(props);
this.onMove = this.onMove.bind(this);
this.testVarible= "this is a test";
} onMove() {
console.log(this.testVarible);
}
}

Metoda 2 dla powiązania kontekstu:
class MyContainer extends Component { constructor(props) {
super(props);
this.testVarible= "this is a test";
} onMove = () => {
console.log(this.testVarible);
}
}


Metoda 2 jest moim preferowanym sposobem

ale możesz wybrać własny.

Aktualizacja:

możesz także tworzyć właściwości klas bez konstruktora:
class MyContainer extends Component { testVarible= "this is a test"; onMove = () => {
console.log(this.testVarible);
}
}


Uwaga
... Jeśli chcesz również zaktualizować widok, podczas ustawiania lub zmiany wartości użyj metod
state
i
setState
.
Przykład:
class MyContainer extends Component { state = { testVarible: "this is a test" }; onMove = () => {
console.log(this.state.testVarible);
this.setState({ testVarible: "new value" });
}
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zakładając, że
onMove
jest modułem obsługi zdarzeń, prawdopodobnie jego kontekst jest inny niż instancja
MyContainer
, czyli
this
wskazuje na coś innego .
Możesz ręcznie powiązać kontekst funkcji podczas budowania instancji za pomocą
Function.bind
:
class MyContainer extends Component {
constructor(props) {
super(props); this.onMove = this.onMove.bind(this); this.test = "this is a test";
} onMove() {
console.log(this.test);
}
}

Oprócz,
test !== testVariable

.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się