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

Question

我正在创建一个简单的任务演示并制作 taskNameInput 组件。你可以看到我尝试过的几种方法，但我总是出错。如何使用 Typescript 进行 React？

你可以看到我的 tsconfig.json 和 tslint.json 的回购： 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>
)

Answer 1

请注意 handleNewTaskName 使用 name=()=>{} 而不是仅使用 name() {}

实例化的不同之处

在构造函数中绑定方法，或者使用es7的class语法。解决方法如下：

  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>
    )

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

Input onChange w/ React & TypeScript errors: jsx no-lambda no-bind

javascript

reactjs

typescript

typescript-typings

tslint