代码之家 › 专栏 › 技术社区 › Falieson

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

tslint typescript-typings typescript reactjs javascript

Falieson · 技术社区 · 7 年前

你可以看到我的tsconfig的回购协议。json和tslint.json: https://github.com/Falieson/react15-meteor1.5 ,我正在使用 tslint-react 随附 jsx-no-lambda jsx-no-bind

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

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

我之前的提交是一个反例。你可以看到我的计数器组件对bind的调用不会导致

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

1 回复 | 直到 7 年前

Falieson 7 年前

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

推荐文章

Phaze · 不推荐使用角形6 ng皮棉组合测试

6 年前

Martin Bamford · Typescript组件选择器应命名为未定义

7 年前

Ikhlak S. Shantanu Sharma · Visual Studio代码双引号语法

7 年前

Faly · 禁止开发人员禁用任何TSLint规则

7 年前

kentor · TSLint:Backbone get()在所属模型意义之外调用

7 年前

Laxmikant Dange · VS代码的TS lint插件不跟踪关闭的文件

7 年前

Jørgen Svennevik Notland · 类型“Observable”上不存在属性“unsubscribe”

7 年前

Robin · TSLint和React无状态组件命名(PascalCase与camelCase)

7 年前

Falieson · 输入onChange w/React&TypeScript错误:jsx no lambda no bind

7 年前

ANKIT HALDAR · 自动修复TSLint警告

7 年前