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

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

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

Uncaught TypeError: this.setState is not a function

下記の例のように onChangeText(e) 関数で変更されたテキストの値をstateに適用しようとしたら、以下例の 5行目のコードのように bind(this) とかする必要があります。
詳しく説明するとややこしいので、javascriptの bind についてや調べると勉強になるかもしれません。
特に、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>
    );
  }
}
No tags for this post.

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