React this.setState is undefined

這是該類的未完成版本，但Typehead類的完成版本應打印出與匹配輸入的道具的選項列表 - 基本上是自動完成功能。我遇到的問題是當我調用handleChange方法時，出現「無法讀取屬性'setState'undefined」的錯誤。這裏是代碼：React this.setState is undefined

import React from 'react' 

export default class Typehead extends React.Component { 
    constructor() { 
    super() 
    this.state = {} 
    } 

    handleChange(e) { 
    this.setState(previousState => { 
     previousState = e.target.value 
     return {previousState} 
    }) 
    console.log(this.state) 
    } 

    render() { 
    return (
     <form> 
     <div className="input-group"> 
      <label> 
      Choose a Track: 
      <input onChange={this.handleChange} type="text" 
      className="form-control" placeholder="Song Name"/> 
      </label> 
     </div> 
     </form> 
    ) 
    } 
}

任何解釋爲什麼'this'在handleChange中未定義將不勝感激！

來源

2017-07-29 Nic Bonetto

請參閱處理React事件的文檔：https：//facebook.github.io/react/docs/handling-events.html – aug

我認爲這是最佳答案！真正的LPT在評論中。 –

您應該將組件綁定到handleChange。試試這個：

constructor() { 
    super() 
    this.state = {} 
    this.handleChange = this.handleChange.bind(this); 
    }

如果你不使用它，handleChange將'input'識別爲'this'，但不識別組件。

來源

2017-07-29 01:05:35

感謝您的快速響應！修復了這個問題 –

就是因爲事件處理程序的函數上下文被分配給你分配的事件處理......你必須明確地綁定功能或使用箭頭函數的對象的原因...

我最常做的是在類的構造包括此：

this.fn = this.fn.bind(this)

這將保存功能方面它已被指定爲事件處理程序（箭頭功能也保持不同情境下）

希望這有助於後，我是typin g這在我的手機鍵盤上

來源

2017-07-29 01:10:51

React this.setState is undefined

回答

相關問題