輸入onChange w/React＆TypeScript錯誤：jsx no-lambda no-bind

Question

我正在創建一個簡單的任務演示並製作taskNameInput組件。你可以看到我試圖解決這個問題的一些方法，但是我不斷收到錯誤。如何使用Typescript進行反應？

你可以看到我爲我的tsconfig.json和tslint.json回購：https://github.com/Falieson/react15-meteor1.5，我使用tslint-react自帶jsx-no-lambda和jsx-no-bind

觸發JSX-沒有綁定錯誤

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

觸發器jsx-no-lambda error

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

我以前的提交是一個反例。您可以看到我的CounterComponent的綁定調用不會導致jsx-no-bind錯誤並滿足jsx-no-lambda規則。

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

Answer 1

通知在handleNewTaskName如何與名稱實例化的差=（）=> {}而不是隻是名稱的（）{}

綁定在構造的方法，或使用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> 
    )