Próbuję użyć elementu formularza Wybierz z Bulmy i nie mogę znaleźć najbardziej podstawowe pytania ... jak wykryć, kiedy opcja jest wybrana przez użytkownika? Chcę wywołać funkcję zmiany języka witryny, gdy wybrana jest opcja wyboru języka, ale nie mogę dowiedzieć się, jak zarejestrować zdarzenie „wybierz”.
Element działa dobrze i przełącza się między dwoma językami, ale co muszę zrobić, aby wykryć, kiedy jedna z opcji jest faktycznie wybrana?
<div className="navbar-item">
<div className="select">
<select>
<option>English</option>
<option>Chinese</option>
</select>
</div>
</div>
Próbowałem użyć zdarzeń onChange i onClick, ale żadne z nich nie działa, na przykład:
<div className="navbar-item">
<div className="select">
<select>
<option onChange={() => changeLanguage('en')}>English</option>
<option onChange={() => changeLanguage('cn')}>Chinese</option>
</select>
</div>
</div>
Czy muszę w tym celu tworzyć oddzielne zmienne stanu reakcji i samodzielnie zarządzać wyborem?
ODPOWIEDŹ
Byłem w stanie poskładać fragmenty z różnych odpowiedzi, aby to działało, próbowałem zaktualizować odpowiedź, aby była poprawna, ale także zamieszczam tutaj dla dobra społeczności.
Oto JSX z opcjami Wybierz:
<div className="navbar-item">
<div className="select">
<select onChange={(e) => changeLanguage(e)}>
<option value="en" id="en">English</option>
<option value="cn" id="cn">中文</option>
</select>
</div>
</div>
I odpowiednia funkcja zmiany języka:
const changeLanguage = event => {
i18n.changeLanguage(event.target.value);
};
2 odpowiedzi
Wygląda na to, że musisz umieścić onChange na zaznaczeniu zamiast opcji.
Więc:
<div className="select" onChange={(e) => changeLanguage(e)}>
<select>
<option value="en">English</option>
<option value="cn">Chinese</option>
</select>
</div>
</div>
Stamtąd możesz użyć odwołania reagowania, aby uzyskać wartość zaznaczenia. https://reactjs.org/docs/refs-and-the-dom. html
Uzyskaj wartość pola wyboru i napisz funkcję o nazwie changeLanguage, która ma jakąś trójskładnikową operację, aby wykryć, który język jest aktualnie wybrany, i logikę wyzwalaną przy zmianach języka. TO ZNACZY.
if(selectId.val === 'en') //do some code
Powinieneś umieścić moduł obsługi onChange na elemencie select zamiast option, oto kod reakcji, aby obsłużyć zmianę opcji i zmienić stan
import React, { Component } from "react";
export default class App extends Component {
state = {
lang: "eng" // set english by default
};
onSelect = ev => {
this.setState({ lang: ev.target.value });
};
render() {
return (
<div className="navbar-item">
<div className="select">
<select onChange={this.onSelect}>
<option value="eng">English</option>
<option value="ch">Chinese</option>
</select>
</div>
</div>
);
}
}