IconButtonでonClickを使うと勝手にリロードされる

Question

前提・実現したいこと

material-uiのIconButtonを使ってaxiosを使った非同期通信をしたいと思っています。
しかし、今のコードだとクリックした際に勝手にリロードされてしまい、コンソールが表示されません(コンソールが表示されてすぐ上書きされているかもしれません)
なぜこのようなことが起きているのでしょうか。
経験者やわかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

IconButtonでonClickを使うと勝手にリロードされる

該当のソースコード

import * as React from 'react'
import Paper from '@material-ui/core/Paper'
import InputBase from '@material-ui/core/InputBase'
import SearchButton from '../Atoms/SearchButton'
import axios from 'axios'

interface Props {
  paper_width: string;
  place_holder: string;
  display: string;
}

export default function CustomizedInputBase(props: Props): JSX.Element {
  const [label, setLabel] = React.useState('')

  function handleSubmit(){
    const params = {
      label: label
    }
    //このコンソールが実行される前に勝手にリロードされる
    console.log(label)
    axios.get('/images/search', { params })
      .then((res)=>{
        console.log(res.data)
      })
  }

  function handleChange(e: any){
    setLabel(e.target.value)
    console.log(label)
  }

  return (
    <Paper
      component="form"
      sx={{ padding: '2px 4px', display: props.display, alignItems: 'center', width: parseInt(props.paper_width) }}
    >
      <InputBase
        sx={{ ml: 1, flex: 1 }}
        placeholder={props.place_holder}
        inputProps={{ 'aria-label': props.place_holder }}
        onChange={handleChange}
      />
      <SearchButton padding='10px' onClick={handleSubmit} />
    </Paper>
  );
}

import * as React from 'react'
import IconButton from '@material-ui/core/IconButton'
import SearchIcon from '@material-ui/icons/Search'

interface Props {
  padding: string;
  onClick: any;
}

export default function SearchButton(props: Props): JSX.Element {
  return (
    <IconButton type="submit" sx={{ p: props.padding }} aria-label="search">
        <SearchIcon />
    </IconButton>
  );
}

Comments

[hoshi-takanori]

<Paper に component="form" を設定しているために普通の form として送信されてしまうのかも？

Answer 1

import * as React from 'react'
import IconButton from '@material-ui/core/IconButton'
import SearchIcon from '@material-ui/icons/Search'

interface Props {
  padding: string;
  onClick: any;
}

export default function SearchButton(props: Props): JSX.Element {
  return (
    <IconButton type="button" sx={{ p: props.padding }} aria-label="search" onClick={props.onClick}>
        <SearchIcon />
    </IconButton>
  );
}

Answer 2

なぜこのようなことが起きているのでしょうか。

ボタンがtype="submit"となっているので、ブラウザが当該のボタンを押した後にフォーム送信の動作を行います。

純粋にJavaScriptの動作だけさせたい場合はtype="button"としましょう。

Comments

[aiai8976]

リロードはされないのですが、handleSubmitが動いていないです、、、

[maisumakun]

SearchButtonでonClickを全く使っていないので、何も起きません。

[aiai8976]

意味を理解しました。
ありがとうございました。