React.js:エラー this.setState is not a function

記事公開日:
最終更新日:

This post is also available in: English-US (英語)

本記事は、React.js でテキストボックスの値の変更を state で扱いたい時に以下のようなエラーが出た場合のメモです。
他にも色々なエラーの原因が考えられるので、数あるうちのひとつとして参考程度にしていただければと思います。
ちなみに、下記のサンプルコードにおいて、UIは Material UI を使っています。

Uncaught TypeError: this.setState is not a function

下記の例のように onChangeText(e) 関数で変更されたテキストの値をstateに適用しようとしたら、以下例の 5行目のコードのように bind(this) とする必要があります。
javascriptの bind 関数を使って this を束縛します。
constructor で bind(this) としておかないと return文の文脈での this が指定されません。
特に、React.jsではbind(this)を使う場面が多いです。

export class Addkeyword extends React.Component {

    constructor(props) {
        super(props);
        this.state = {value: null};

        this.onChangeText = this.onChangeText.bind(this);
    }


    onChangeText(e) {
        this.setState({value: e.target.value});
    }

    render() {
        return (
             <div>
             <TextField hintText="Message Field"
             floatingLabelText="MultiLine and FloatingLabel"
             value={this.state.value}
             onChange={this.onChangeText}
             multiLine={true}
             rows={2} />

            </div>
    );
  }
}

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。