Question

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

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

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

答案

我可以将各种答案的内容拼凑而成，因此我尝试更新答案，使之正确无误，但也为了社区的利益而在此处发布。

这是带有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元素上，而不是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>
    );
  }
}

Answer 2

您似乎需要将onChange放置在select而不是选项上。

所以：

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

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

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

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

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

2 个答案: