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

前提・実現したいこと

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

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

該当のソースコード

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>
  );
}

hoshi-takanori

2021/03/26 08:02

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

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

回答2件

TypeScript
1import * as React from 'react'
2import IconButton from '@material-ui/core/IconButton'
3import SearchIcon from '@material-ui/icons/Search'
4
5interface Props {
6  padding: string;
7  onClick: any;
8}
9
10export default function SearchButton(props: Props): JSX.Element {
11  return (
12    <IconButton type="button" sx={{ p: props.padding }} aria-label="search" onClick={props.onClick}>
13        <SearchIcon />
14    </IconButton>
15  );
16}
17