文字入力する度にonClickが働いてしまう

##開発環境
サーバーサイド: Rails,
フロントエンド: React hooksをつかっています。create-react-appベースです。

##したいこと
ボタンが押されたときに、フォームの内容をAPIに送信したいです！

buttonのonClickイベントに、APIにデータをわたす関数を当てています。

一応、このコードでも送信はできているのですが文字入力をするたびにAPIに送信されてしまいます。

文字入力中に意図せず送信されてしまうデータはちゃんと中身があるのですが、ボタンを押して送信した時の値は空になってしまっています。

どうすれば、buttonのクリックだけでデータを送信できるでしょうか。また、何か試すと良い事などあれば教えていただきたいです。

jsx
1    <form>
2
3    <FormWrapper>
4    <TextFieldWrapper>
5    <TextField
6      id="standard-search"
7      label="Email"
8      name="email"
9      value={state.email}
10     onChange={handleChangeEmail}
11    />
12    </TextFieldWrapper>
13    <TextFieldWrapper>
14    <TextField
15      id="standard-password-input"
16      label="Password"
17      type="password"
18      autoComplete="current-password"
19      name="password"
20      value={state.password}
21      onChange={handleChangePassword}
22    />
23    </TextFieldWrapper>
24    <ButtonWrapper>
25      <Button variant="contained" color="primary" type="submit" onClick={postLogin(
26        {
27          email:state.email,
28          password: state.password
29        })}>
30        ログイン
31      </Button>
32    </ButtonWrapper>
33  </FormWrapper>
34
35  </form>

よろしくおねがいします。

hoshi-takanori

2021/04/28 17:53

<Button　の onClick={postLogin( を onClick={() => postLogin( にしてみるとか。

yaha4967

2021/04/28 18:36

本当にありがとうございます！まさにその通りでした！ ”() => ”をつけたら入力毎に送信されることなく正常に送信できました。いくらググってもドキュメントみてもわからず途方に暮れてたのでとても感謝です。

hoshi-takanori

2021/04/29 04:07

ところで、() => をつけると期待通りの動きになる理由はお分かりでしょうか？

yaha4967

2021/04/29 10:12

全くわからないです。。。一応、postLoginがaxiosを使っているのでそれが関係してるのかなと想像してます。

行動規範の内容に同意します

回答1件

ベストアンサー

<Button の onClick={postLogin( を onClick={() => postLogin( にすると期待通りの動きになると思いますが、なぜ () => をつけると期待通りの動きになるかを書きます。

JavaScript では、関数の後ろに () をつけるかどうかでまったく意味が変わり、() をつけないと関数そのものを表し、() をつけると関数を呼び出してその結果 (戻り値) を利用するという意味になります。

TextField の onChange={handleChangeEmail} や onChange={handleChangePassword} には () がついてませんので、これらは関数をそのまま TextField に渡していることになります。そして、TextField の内容が編集するたびに、その関数が呼び出されます。

ところが、Button の onClick={postLogin({ ... })} というのは、関数の後ろに () があるので、表示を更新するタイミングで (つまり、この場合は TextField が編集されて state が更新されるたびに) その関数を実行して、その結果を Button に渡すという意味になります。そのため、文字を入力するたびに API 送信が行われてしまってました。

これを防ぐには、onClick の中でその関数を実行しないようにする必要があります。つまり、onClick={() => postLogin({ ... })} と書くことで onClick の値は () => postLogin({ ... }) という関数になり、postLogin が実行されるのはボタンが押した時になるのです。

投稿2021/04/29 11:44

hoshi-takanori

総合スコア7901