根据浏览器语言 ReactJS 设置下拉值？

Question

所以我有一个小的设置，其中我有一个下拉列表，并且下拉列表有两个值。 我正在尝试根据检测到的浏览器语言设置下拉列表的默认值。 因此，如果浏览器语言为英语，则下拉列表及其值应默认为English ，如果语言为Spanish ，则应默认为西班牙语，依此类推。 从本质上讲，它应该是动态的，并且可能会在未来发展得更多。 任何帮助将不胜感激。

查看此CodeSandbox以获取工作示例。

这是完整的代码

import React, { Component } from "react";

class Newbie extends Component {
  state = {
    languageSelection: [
      { option: "English", value: "en-us" },
      { option: "Spanish", value: "es" }
    ]
  };
  componentDidMount() {
    let detectedLanguage = navigator.language || navigator.userLanguage;
    alert("The Language is " + detectedLanguage)
  }

  render() {
    return (
      <div>
        <label>
          Language
          <select>
            <option value="en-us">English</option>
            <option value="es">Spanish</option>
          </select>
        </label>
      </div>
    );
  }
}

export default Newbie;

谢谢大家的帮助。：非常感谢。 :)

Answer 1

import React, { Component } from "react";

class Newbie extends Component {
  state = { selected: navigator.language || navigator.userLanguage };

  handleChange = (e) => {
    this.setState({ selected: e.target.value })
  }


  render() {
    return (
      <div>
        <label>
          Language
          <select value={this.state.selected} onChange={this.handleChange}>
            <option value="en-US">English</option>
            <option value="es">Spanish</option>
          </select>
        </label>
      </div>
    );
  }
}

export default Newbie;