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.testVariablejest 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?
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
2 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Dlatego zadeklarowana funkcja nie będzie miała tego samego kontekstu co klasa, a próba uzyskania dostępu donie 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 metodi.
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
Potwierdzenie od:
Możesz ręcznie powiązać kontekst funkcji podczas budowania instancji za pomocą:
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,
.