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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

1回答

327閲覧

クリックしていないのにクリックイベントの中身が出てしまう

hon.ki

総合スコア157

React.js

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

0グッド

0クリップ

投稿2022/06/27 12:02

React初心者です。クリックイベントについて質問です。

javascript

1import React from "react"; 2import "./PersonList.css"; 3import axios from "axios"; 4import Button from '@mui/material/Button'; 5 6export default class PersonList extends React.Component { 7 state = { 8 persons: [], 9 }; 10 11 componentDidMount() { 12 axios.get(`https://jsonplaceholder.typicode.com/users`).then((res) => { 13 const persons = res.data; 14 this.setState({ persons }); 15 }); 16 } 17 18 clickMiddleButton() { 19 alert("クリックしましたね。"); 20 } 21 render() { 22 return ( 23 <div className="container"> 24 <ul> 25 {this.state.persons.map((person) => ( 26 <li key={person.id}>{person.name}</li> 27 ))} 28 </ul> 29 <Button variant="text">Text</Button> 30 <Button variant="contained" onClick={this.clickMiddleButton()}>Contained</Button> 31 <Button variant="outlined">Outlined</Button> 32 </div> 33 ); 34 } 35} 36

javascript

1import React from 'react'; 2import logo from './logo.svg'; 3import './App.css'; 4import PersonList from './PersonList'; 5function App() { 6 return ( 7 <div className="App"> 8 <header className="App-header"> 9 <img src={logo} className="App-logo" alt="logo" /> 10 <p> 11 Edit <code>src/App.tsx</code> and save to reload.changed 12 </p> 13 <a 14 className="App-link" 15 href="https://reactjs.org" 16 target="_blank" 17 rel="noopener noreferrer" 18 > 19 Learn React 20 </a> 21 </header> 22 <PersonList/> 23 </div> 24 ); 25} 26 27export default App;

javascript

1import React from 'react'; 2import ReactDOM from 'react-dom/client'; 3import './index.css'; 4import App from './App'; 5import reportWebVitals from './reportWebVitals'; 6 7const root = ReactDOM.createRoot( 8 document.getElementById('root') as HTMLElement 9); 10root.render( 11 <React.StrictMode> 12 <App /> 13 </React.StrictMode> 14); 15 16// If you want to start measuring performance in your app, pass a function 17// to log results (for example: reportWebVitals(console.log)) 18// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19reportWebVitals();

としてリロードすると、なぜか「クリックしましたね。」が再読み込みの後に出てきてしまいます。(まだクリックしていないのに?)
これはなぜでしょうか?イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

onClick={this.clickMiddleButton()}と指定すると、this.clickMiddleButton()呼び出して、その返り値をonClickにセットする、という意味になってしまいます。

投稿2022/06/27 12:24

maisumakun

総合スコア145123

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

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

hon.ki

2022/06/28 10:55

<Button variant="contained" onClick={this.clickMiddleButton}>Contained</Button> だと期待通りの挙動になるようです。 こういうものなのでしょうか?
hon.ki

2022/06/28 10:55

回答ありがとうございます。
maisumakun

2022/06/28 11:13

> こういうものなのでしょうか? そういうものです。(ただし、そのまま書くとthisがずれるという問題が発生します)
hon.ki

2022/06/29 11:45

(ただし、そのまま書くとthisがずれるという問題が発生します) ここの意味が、理解できませんでした。どの辺が問題なのでしょうか?
hon.ki

2022/06/29 11:45

もしよろしければ、もう少し具体的に教えていただけますと、大変助かります。
maisumakun

2022/06/29 14:31

> どの辺が問題なのでしょうか? メソッドの中に書いたthisが、正しくインスタンスを指さなくなります(今回のように、メソッド内にthisが現れない場合は特に問題ありません)。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問