如何在反应按钮上正确使用更改功能并且没有任何未使用的变量答案

【问题标题】：How to properly use a change function on react button and not have any unused variables如何在反应按钮上正确使用更改功能并且没有任何未使用的变量
【发布时间】：2020-03-03 04:27:16
【问题描述】：

我希望有一个基本按钮，我可以在其中将type 传递给单击时的函数。但是，我想在函数中不包含 event 的情况下执行此操作，因为我确实收到了一个 linting 错误 - event is definied but never used。

const Test: React.FC = () => {
  const [state, setState] = useState(null);
  const handleClick = (type: string) => (event: object) => {
    switch (type) {
      case 'CASE_1':
        doSomething(state);
        break;
      default:
        return;
    }
  };

  return (
    <button onClick={handleClick('CASE_1')}>CLICK ME</button>
  )
}

【问题讨论】：

干脆把event: object去掉就好了

标签： reactjs typescript eslint prop

【解决方案1】：

要解决关于 TypeScripts 内置 linter 的问题：

在未使用的参数名称前加上下划线：(_event: object) => {

来自TypeScript docs：

名称以_ 开头的参数声明免于未使用的参数检查。

您还可以使用 noUnusedParameters 标志在 TypeScript 配置中全局禁用未使用的参数警告。

一般来说，任何 linter 都应该通过完全省略参数来静音：() => {...
如果使用参数从 TypeScript 调用此函数，则编译器（可能还有其他 linter）会在调用站点抱怨无关参数。
但是因为它只被 React 调用，所以不会发生这种情况。

【讨论】：