React 响应事件

原创

已于 2025-04-10 17:17:37 修改 · 939 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2025-04-09 12:14:44 首次发布

开发环境：React+ts+antd

使用 React 可以在 JSX 中添加事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。

学习内容
1.编写事件处理函数的不同方法
2.如何从父组件传递事件处理逻辑
3.事件如何传播以及如何停止它们

添加事件处理函数

如需添加一个事件处理函数，你需要先定义一个函数，然后将其作为 prop 传入合适的 JSX 标签。

import React from "react";
import {
   
    Button } from 'antd';


const App:React.FC=()=>{
   
   
    const handleClick = () => {
   
   
        alert('你点击了按钮!')
    }
    return (
        <div>
            <Button type="primary" onClick={
   
   handleClick}>点我看看</Button>
        </div>
    )
}

export default App

你可以定义 handleClick 函数然后将其作为 prop 传入。其中 handleClick 是一个事件处理函数。事件处理函数有如下特点:

通常在你的组件内部定义。
名称以 handle 开头，后跟事件名称。

或者，你也可以在 JSX 中定义一个内联的事件处理函数：

<Button type="primary" onClick={
   
   () => {
   
   
	alert('你点击了按钮');
}}>点我看看</Button>

在这里插入图片描述

在事件处理函数中读取 props

由于事件处理函数声明于组件内部，因此它们可以直接访问组件的 props。示例中的按钮，当点击时会弹出带有 message prop 的 alert：

import React from "react";
import {
   
    Button } from 'antd';

interface MessagePro{
   
   
    message:string
    children:React.ReactNode
}

const AlertButton:React.FC<MessagePro> = ({
    
    message,children}) => {
   
   
   return(
       <Button type="primary" onClick={
   
   ()=>{
   
   
           alert(message)
       }}>{
   
   children}</Button>
   )
}

const App:React.FC=()=>{
   
   
    return (
        <div>
            <div>
                <AlertButton message="正在播放！">
                    播放电影
                </AlertButton>
                <AlertButton message="正在上传！">
                    上传图片
                <