Reactでformをsubmitした時の挙動について

Question

書籍を検索するフォームをReactで作成しており、入力欄でエンターを押した時に検索結果が表示されるようにしたいのですが、エンターを押してもhandleSubmitが実行されません。

しかしform要素内にbutton要素を設置し、onClick属性にhandleSubmitを設定すると検索結果が表示されます。

なぜこのような挙動になるのでしょうか？

const SearchForm = ({ setBooks }) => {
  const classes = useStyles();
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');

  const handleTitleInput = useCallback(e => {
    setTitle(e.target.value);
  }, []);

  const handleAuthorInput = useCallback(e => {
    setAuthor(e.target.value);
  }, []);

  const handleSubmit = useCallback(
    async e => {
      e.preventDefault();
      if (!(title || author)) {
        return;
      }

      const data = await fetchBooks(title, author);
      setBooks(data);
    },
    [author, setBooks, title]
  );

  return (
    <form noValidate autoComplete="off" onSubmit={handleSubmit}>
      <TextField
        id="filled-basic"
        variant="filled"
        color="secondary"
        label="タイトル"
        value={title}
        onChange={handleTitleInput}
        className={classes.root}
      />
      <Box mt={3} />
      <TextField
        id="filled-basic"
        variant="filled"
        color="secondary"
        label="著者"
        value={author}
        onChange={handleAuthorInput}
        className={classes.root}
      />
      <button onClick={handleSubmit}>検索</button> //　これを消すと動作しない
    </form>
  );
};

export default SearchForm;

Answer 1

エンターを押してもhandleSubmitが実行されません。

入力要素が複数ある場合、Enterを押しても送信動作は発生しません。もちろん、onSubmitに付けられたイベントが起きることもありません。

Enterで動作させたいのであれば、自分でonKeydownなどをチェックしましょう。

Comments

[maskmelon]

回答をくださりありがとうございます。勉強になりました。