React：Event Listener

最新推荐文章于 2024-12-16 12:47:22 发布

豌豆射手GCC

最新推荐文章于 2024-12-16 12:47:22 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/BLUEsang/article/details/107052313

React 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了在React中如何使用EventListener来添加事件监听，并通过在App组件中定义function并使用setState方法更新state的内容，特别是在处理按钮点击事件时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EventListener

button中传入onClick；

 <button onClick={this.switchNameHandler}>Switch Name</button>

注意switchNameHandler要用（）=>，不然在函数中用this会出现错误；

import React, { Component } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';

class App extends Component {
  state ={
    persons:[
      {name:'Max' , age:28},
      {name:'manu' , age:24},
      {name:'Snie' , age:26}
    ]
  };

  switchNameHandler = ()=>{
    console.log('Was Click!');
  };

  render(){
  return (
    <div className="App">
      <h1>Hi i am a React App!</h1>
      <p>It is working!</p>
      <button onClick={this.switchNameHandler}>Switch Name</button>
      <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
      <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My Hobbies: Racing</Person>
      <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
    </div>
  );
  }
}

export default App;

App中加入function——setState实现对state内容的更改

 switchNameHandler = ()=>{
    //console.log('Was Click!');
    //Do not do this
    //this.state.persons[0].name = 'Maximilian';
    this.setState({persons:[
      {name:'Max1' , age:28},
      {name:'manu1' , age:24},
      {name:'Snie1' , age:26}
    ]})
  };