React中如何为Select下拉框添加onClick？实现reactI18next语言切换

当然可以用下拉框实现语言切换，相比按钮，下拉框更适合多语言场景，以下是两种常见实现方式：

1. 原生HTML <select> 实现 #

利用原生select的onChange事件（比onClick更贴合下拉框交互逻辑），获取选中的语言标识后调用changeLanguage：

import { useTranslation } from 'react-i18next';

function LanguageSelector() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <select 
      value={i18n.language}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="zh">中文</option>
      {/* 可添加更多语言选项 */}
    </select>
  );
}

2. UI组件库（以Ant Design Select为例） #

如果项目使用了UI组件库，比如Ant Design，也可以用其封装的Select组件实现：

import { useTranslation } from 'react-i18next';
import { Select } from 'antd';

const { Option } = Select;

function LanguageSelector() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <Select
      value={i18n.language}
      onChange={changeLanguage}
      style={{ width: 120 }}
    >
      <Option value="en">English</Option>
      <Option value="zh">中文</Option>
    </Select>
  );
}

补充说明 #

• 两种方式都是通过监听选中值的变化触发语言切换，比onClick更符合下拉框的交互习惯
• 绑定value={i18n.language}可以让下拉框默认显示当前选中的语言，提升用户体验

内容的提问来源于stack exchange，提问作者ffs_Kenny