Элемент формы Bulma Select - как определить «выбрать» или изменить событие при выборе опции - PullRequest
Новая
       19

Элемент формы Bulma Select - как определить «выбрать» или изменить событие при выборе опции

0 голосов
/ 21 марта 2020

Я пытаюсь использовать элемент формы Select из Bulma и не могу понять наиболее основные c вопросов ... как определить, когда пользователь выбрал опцию? Я хочу вызвать функцию для изменения языка веб-сайта, когда выбрана опция выбора языка, но не могу понять, как зарегистрировать событие "select".

enter image description here

Элемент работает очень хорошо и переключается между двумя языками, однако, что мне нужно сделать, чтобы определить, когда один из вариантов действительно выбран? 

<div className="navbar-item">
  <div className="select">
    <select>
      <option>English</option>
      <option>Chinese</option>
    </select>
  </div>
</div>

Я пытался использовать события onChange и onClick, но ни одно из них не работает, например: 

<div className="navbar-item">
  <div className="select">
    <select>
      <option onChange={() => changeLanguage('en')}>English</option>
      <option onChange={() => changeLanguage('cn')}>Chinese</option>
    </select>
  </div>
</div>

Нужно ли создавать отдельные переменные состояния React для этим и управлять выбором сам?

ОТВЕТ

Мне удалось собрать воедино кусочки различных ответов, и я попытался обновить ответ, чтобы он был корректным, но также разместил здесь сообщение для благо сообщества.

Вот JSX с опциями выбора: 

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

и соответствующая функция смены языка: 

    const changeLanguage = event => {
        i18n.changeLanguage(event.target.value);
      };

Ответы [ 2 ]

2 голосов
/ 21 марта 2020

Вы должны поместить обработчик onChange в элемент select вместо option, вот код реакции для обработки изменения параметра и изменения вашего состояния 

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>
    );
  }
}
1 голос
/ 21 марта 2020

Похоже, вам нужно поставить onChange на select вместо опции.

Итак: 

  <div className="select" onChange={(e) => changeLanguage(e)}>
    <select>
      <option value="en">English</option>
      <option value="cn">Chinese</option>
    </select>
  </div>
</div>

Оттуда вы можете использовать ссылку реакции, чтобы получить значение выбора. https://reactjs.org/docs/refs-and-the-dom.html

Получите значение поля выбора и напишите функцию с именем changeLanguage, которая выполняет некоторую троичную операцию, чтобы определить, какой язык выбран в настоящий момент, и лог c для запуска на языке. меняется. IE 

if(selectId.val === 'en') //do some code
...