開発したアプリなど一覧

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

コメント