React中使用event获取textarea值遇ESLint报错的解决方法

这个报错是ESLint的no-restricted-globals规则触发的——你直接使用了全局的event对象，而ESLint默认禁止这种写法，主要是为了避免浏览器兼容性和作用域混乱的问题。

解决办法分两种，优先推荐第一种：

• 显式接收事件参数（推荐）
  不要直接依赖全局event，在事件处理函数里明确把event作为参数传入：

  // 错误写法（触发报错）
  const handleTextChange = () => {
    const textValue = event.target.value;
  };
  
  // 正确写法
  const handleTextChange = (event) => { // 显式接收event参数
    const textValue = event.target.value;
  };
  
  // 绑定到textarea组件上
  <textarea onChange={handleTextChange} />
  

• 修改ESLint配置（不推荐）
  如果一定要使用全局event，可以在项目的ESLint配置文件（比如.eslintrc.js或.eslintrc.json）中修改规则，移除对event的限制：

  {
    "rules": {
      "no-restricted-globals": ["error", "name", "length"] // 把"event"从限制列表中删除
      // 或者直接关闭这条规则："no-restricted-globals": "off"
    }
  }
  

优先选择第一种方案，显式传递参数更符合React的编程规范，也能避免全局变量带来的潜在问题。

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