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

Question

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

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

<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 状态变量并自己管理 selection？

回答

能够从各种答案中拼凑出一些信息来使这个工作正常，我尝试更新答案以使其正确，但为了社区的利益也张贴在这里。

这是带有 Select 选项的 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 而不是选项上。

所以：

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

您可以从那里使用 React 引用来获取 select 的值。 https://reactjs.org/docs/refs-and-the-dom.html

获取 select 字段的值并编写一个名为 changeLanguage 的函数，该函数具有一些三元操作来检测当前 select 的语言以及触发语言更改的逻辑。即

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

Answer 2

您应该将 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>
    );
  }
}

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

Bulma Select form element - how to detect "select" or change event when an option is selected

javascript

reactjs

bulma