[解決済み] react.jsでEnterキーを使ってフォームを送信するには?
2022-04-28 20:24:15
質問
ここに私のフォームとonClickメソッドがあります。キーボードのEnterボタンが押されたときに、このメソッドを実行したいのですが。どのようにすればよいですか?
注 jqueryは使わないでください。
comment: function (e) {
e.preventDefault();
this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
},
<form className="commentForm">
<textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br />
<input type="text" placeholder="userPostId" ref="userPostId" /> <br />
<button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
</form>
解決方法は?
変更
<button type="button"
を
<button type="submit"
. を削除します。
onClick
. その代わりに
<form className="commentForm" onSubmit={this.onFormSubmit}>
. これで、ボタンのクリックとリターンキーの押下をキャッチできるはずです。
const onFormSubmit = e => {
e.preventDefault();
const { name, email } = this.state;
// send to server with e.g. `window.fetch`
}
...
<form onSubmit={onFormSubmit}>
...
<button type="submit">Submit</button>
</form>
関連
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は?
-
[解決済み】Enterキーを押した後にonChangeイベントを呼び出す方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] React テキストを挟んだ横長の仕切りを作る
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] 矢印本体を囲む予期せぬブロックステートメント
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み] React JSXのforEach()でHTMLが出力されない