[解決済み] React - _this2.SetStateは関数ではありません。
2022-02-12 20:44:11
質問
入力されたテキストを画面に印刷するコンポーネントを作ろうとしています。
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
}
render() {
return (
<div className="search-bar">
<input value={this.state.term} onChange={event => this.SetState(event.target.value)} />
The value of input is: {this.state.term}
</div>
);
}
}
しかし、Chromeのコンソールでエラーが出続けています。
bundle.js:19818 Uncaught TypeError: _this2.SetState is not a function
何かアイデアはありますか?
ありがとうございます。
解決方法は?
これを試してみてください。
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
this.setInputState = this.setInputState.bind(this);
}
setInputState(event) {
this.setState({ term: event.target.value });
}
render() {
return (
<div className="search-bar">
<input value={this.state.term} onChange={this.setInputState} />
The value of input is: {this.state.term}
</div>
);
}
}
関連
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み】プリセットファイルはオブジェクトのエクスポートができない
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み】Typescript react - モジュール ''react-materialize'' の宣言ファイルが見つかりませんでした。'path/to/module-name.js' は暗黙のうちに any 型を持ちます。
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] Webpack のコンパイルに失敗した
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み】イベントハンドラ内のReactインスタンス(this)にアクセスできない【重複あり