React this.setState is undefined

Question

これは未完成のクラスですが、Typeheadクラスの完成版は、入力と一致する選択肢のリストをプリントアウトすることになっています - 基本的にオートコンプリート機能です。私が抱えている問題は、handleChangeメソッドを呼び出すと、エラー "未定義のsetState 'プロパティが読み取れないということです。ここにコードがあります：

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で定義されていない理由についての説明は非常に高く評価されます。

Answer 1

コンポーネントをhandleChangeにバインドする必要があります。これを試してください：

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

これを使用しない場合、handleChangeは「入力」を「this」と認識しますが、コンポーネントではありません。

Answer 2

イベントハンドラの関数コンテキストは、あなたが...あなたは持って明示的に機能を結合するか、または矢印機能を使用するためにイベントハンドラを割り当てているオブジェクトに割り当てられますされているため、理由...

私は通常行うことはクラスのコンストラクタでこれを含めている：それは、イベントハンドラとして割り当てられた後

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

これは、

は、この情報がお役に立てば幸いです（矢印関数は、コンテキストを維持する）関数コンテキストを保持します私はタイピングしているg電話のキーボードでこれを