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

Viewed 1490

I am creating a simple task demo and making the taskNameInput component. You can see a couple ways I've tried to approach this, but I keep getting errors. How to for React with Typescript?

You can see my repo for my tsconfig.json and tslint.json: https://github.com/Falieson/react15-meteor1.5 , I'm using tslint-react comes with jsx-no-lambda and jsx-no-bind

triggers jsx-no-bind error

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

triggers jsx-no-lambda error

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

My previous commit was a Counter example. You can see my CounterComponent's call to bind doesn't cause a jsx-no-bind error and satisfies the jsx-no-lambda rule.

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