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”.

enter image description here

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);
      };        
0
Ergin 21 marzec 2020, 01:31

2 odpowiedzi

Najlepsza odpowiedź

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
1
Ergin 21 marzec 2020, 17:59

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>
    );
  }
}
2
Natnael A. 3 maj 2020, 16:36