フォーム送信

Reactで状態・フォーム・リストを扱う / 全 6 枚

止めないとstateが消える

左は既定のまま、右は preventDefault で止めています。既定のままだと送信のたびにページが読み込み直され、state がすべて初期値に戻ります。

既定のまま

<form>
  <input value={name}
    onChange={h} />
  <button type="submit">送信</button>
</form>

onSubmitで止める

function handleSubmit(e) {
  e.preventDefault();
  setSent(name + "さんから受領");
}

<form onSubmit={handleSubmit}>
  ...
</form>

1 / 6

← → キーでも送れます