javascript - Bulma Select 表单元素 - 选择选项时如何检测 "select"或更改事件

Question

我正在尝试使用 Select来自 Bulma 的表单元素，无法弄清楚最基本的问题...如何检测用户何时选择选项？我想在选择语言选择选项时调用一个函数来更改网站的语言，但不知道如何注册“选择”事件。

该元素工作得很好，可以在两种语言之间切换，但是我需要做什么来检测何时实际选择了其中一个选项？

<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);
      };        

Answer 1

您应该将 onChange 处理程序放在 select 元素上，而不是 option 上，这里是处理选项更改并更改状态的 react 代码

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>
    );
  }
}