質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

4297閲覧

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

aiai8976

総合スコア112

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/26 07:52

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/03/26 08:02

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

回答2

0

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

投稿2021/03/26 08:28

aiai8976

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

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

投稿2021/03/26 08:06

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aiai8976

2021/03/26 08:09

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

2021/03/26 08:17

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

2021/03/26 08:29

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問