输入 onChange w/ React & TypeScript 错误：jsx no-lambda no-bind

Posted 2023-03-13

【中文标题】输入 onChange w/ React & TypeScript 错误：jsx no-lambda no-bind

【英文标题】：Input onChange w/ React & TypeScript errors: jsx no-lambda no-bind

【发布时间】：2018-01-10 09:25:36

【问题描述】：

我正在创建一个简单的任务演示并制作 taskNameInput 组件。您可以看到我尝试解决此问题的几种方法，但我不断收到错误。如何使用 Typescript 进行 React？

您可以查看我的 tsconfig.json 和 tslint.json 的 repo：https://github.com/Falieson/react15-meteor1.5，我正在使用 tslint-react 附带 jsx-no-lambda 和 jsx-no-bind

触发 jsx-no-bind 错误

public renderTaskInput(): React.ReactElement<> 
    return (
      <div>
        <input
          onChange=this.handleNewTaskName.bind(this)
        />
      </div>
    )
  

触发 jsx-no-lambda 错误

 public renderTaskInput(): React.ReactElement<> 
    return (
      <div>
        <input
          onChange=(e: React.FormEvent<htmlInputElement>) => this.handleNewTaskName(e)
        />
      </div>
    )
  

我之前的提交是一个反例。你可以看到我的 CounterComponent 的 bind 调用不会导致 jsx-no-bind 错误并且满足 jsx-no-lambda 规则。

return (
  <button onClick=this.handleChangeValue.bind(this, decrement)>
    decrement ? 'Decrease' : 'Increase'
  </button>
)

【参考方案1】：

请注意使用 name=()=> 而不是仅使用 name() 实例化 handleNewTaskName 的不同之处

在构造函数中绑定方法，或者使用es7类语法。这是解决方案：

  public handleNewTaskName = (e: React.FormEvent<HTMLInputElement>) => 
  console.log(e.currentTarget.value)
  this.setState(newTaskTitle: e.currentTarget.value)
 
 public renderTaskInput(): React.ReactElement<> 
    return (
      <div>
        <input
          placeholder='New Task Name'
          name='app-tasks-inputTaskName'
          onChange=this.handleNewTaskName
        />
      </div>
    )

【讨论】：

我很想看到一个解决方案，它以某种方式利用 TypeScript 的能力来推断事件类型而无需输入 React.FormEvent<HTMLInputElement>，但我自己想不出。