Question

我正在创建一个简单的任务演示并创建taskNameInput组件。你可以看到我试图解决这个问题的几种方法，但我一直都会遇到错误。如何使用Typescript进行反应？

您可以在我的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 =（）=＆gt; {}而不仅仅是name（）{}

进行实例化的区别

在构造函数中绑定方法，或使用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>
    )

输入onChange w / React＆amp; TypeScript错误：jsx no-lambda no-bind

1 个答案: