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

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

Sponsored Links

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

Uncaught TypeError: this.setState is not a function

UIは Material UI を使っています。

下記の例のように onChangeText(e) 関数で変更されたテキストの値をstateに適用しようとしたら、以下例の 5行目のコードのように bind(this) とかする必要があります。
詳しくはjavascriptの bind について調べると勉強になるかもしれません。

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マーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links