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();
としてリロードすると、なぜか「クリックしましたね。」が再読み込みの後に出てきてしまいます。(まだクリックしていないのに?)
これはなぜでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/28 10:55
2022/06/28 10:55
2022/06/28 11:13
2022/06/29 11:45
2022/06/29 11:45
2022/06/29 14:31