開発したアプリなど一覧

React.js で Form の Submit を防ぐ方法

記事内にアフィリエイトリンクを含む場合があります

通常 HTML の Form にフォーカスを当てた状態でエンターキーを打つなどすると Form を送信してしまう。これを防ぐために form タグに onSubmit="return false;" などと書くわけだが、React.js では思うように動かなかった。

React.js では以下のように preventDefault を用いて標準の動作を無効化させなければいけないようだ。

handleSearchTextChanged(e) { // 省略 },

handleSubmit(e) { e.preventDefault(); },

render: function() { return( <form onSubmit={this.handleSubmit}> <input type="text" name="search-text" onChange={this.handleSearchTextChanged}> </form> ); }

こうすればエンターキーを押しても送信されない。

Sponsored Link

コメント

タイトルとURLをコピーしました