React中创建筛选器事件处理器时event已弃用，该使用什么替代？

首先明确：<select>元素完全支持在change事件处理器中使用event参数，出现弃用提示和划掉标记和元素本身无关，大概率是事件类型声明问题（如果用TypeScript）或误用全局event对象导致的。

常见原因及修复方案 #

1. TypeScript环境下未指定正确的事件类型

如果你的项目用了TypeScript，编辑器会对未指定类型的event参数默认关联弃用的全局Event类型，而非对应<select>元素的专属事件类型。

修复方法：显式声明事件为对应元素的ChangeEvent类型：

// React 示例
import { ChangeEvent } from 'react';

const handleYearFilter = (event: ChangeEvent<HTMLSelectElement>) => {
  const selectedYear = event.target.value;
  // 执行费用筛选逻辑
};

2. 原生JS中误用全局event而非传入参数

部分编辑器（如VS Code）会标记全局event对象为弃用，如果你在事件处理器里没显式接收参数，直接用event，就会触发警告。

修复方法：确保显式接收event参数：

// 原生JS示例
const yearSelect = document.getElementById('year-filter');
yearSelect.addEventListener('change', (event) => {
  const selectedYear = event.target.value;
  // 处理筛选逻辑
});

3. 框架特定的事件绑定写法问题

比如在Vue中，如果你用了错误的事件绑定语法（比如未通过$event传递参数），也可能导致类似提示，确保绑定写法正确：

<!-- Vue 示例 -->
<select @change="handleYearFilter($event)">
  <!-- 年份选项 -->
</select>

<script>
export default {
  methods: {
    handleYearFilter(event) {
      const selectedYear = event.target.value;
      // 筛选逻辑
    }
  }
}
</script>

总结 #

<select>元素的change事件处理器和<input>一样正常支持event参数，警告的核心原因是类型声明缺失或未正确使用传入的参数，而非元素本身的限制，按照上述对应场景修复即可消除警告。

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