Entrée onChange avec erreurs React & TypeScript: jsx no-lambda no-bind

Question

Je crée une démo de tâche simple et crée le composant taskNameInput. Vous pouvez voir de plusieurs façons que j'ai essayé d'aborder cela, mais je continue à recevoir des erreurs. Comment faire pour réagir avec Typescript?

Vous pouvez voir mon repo pour mon tsconfig.json et tslint.json: https://github.com/Falieson/react15-meteor1.5, j'utilise tslint-react est livré avec jsx-no-lambda et jsx-no-bind

déclenche jsx-no-bind erreur

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

déclenche une erreur jsx-no-lambda

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

Mon précédent commit était un exemple de compteur. Vous pouvez voir l'appel à bind de mon CounterComponent ne provoque pas d'erreur jsx-no-bind et satisfait la règle jsx-no-lambda.

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

Answer 1

Notez la différence dans la façon dont handleNewTaskName est instancié avec name =() => {} au lieu du nom juste() {}

Bind la méthode dans le constructeur, ou utiliser la syntaxe de classe ES7. Voici la solution:

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