React 响应事件

开发环境：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:stringchildren: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="正在上传！">上传图片</AlertButton></div></div>)
}export default App

在这里插入图片描述

将事件处理函数作为 props 传递

通常，我们会在父组件中定义子组件的事件处理函数。比如：置于不同位置的 Button 组件，可能最终执行的功能也不同 —— 也许是播放电影，也许是上传图片。

为此，将组件从父组件接收的 prop 作为事件处理函数传递，如下所示：

import React from 'react';
import {Button as AntdButton} from 'antd';// 自定义 Button 组件的 props 类型
interface CustomButtonProps {onClick: () => void,children: React.ReactNode,variant: any,color:any,
}// 自定义 Button 组件
const CustomButton: React.FC<CustomButtonProps> = ({onClick, children, variant,color}) => {return (<AntdButton onClick={onClick} variant={variant} color={color}>{children}</AntdButton>);
};// PlayButton 组件的 props 类型
interface PlayButtonProps {movieName: string;
}// PlayButton 组件
const PlayButton: React.FC<PlayButtonProps> = ({movieName}) => {const handlePlayClick = () => {alert(`正在播放 ${movieName}！`);};return (<CustomButton onClick={handlePlayClick} variant="solid" color="blue">播放  "{movieName}"</CustomButton>);
};// UploadButton 组件
const UploadButton: React.FC = () => {return (<CustomButton onClick={() => alert('正在上传！')} variant="solid" color="red">上传图片</CustomButton>);
};// Toolbar 组件
const Toolbar: React.FC = () => {return (<div><PlayButton movieName="斯巴达克斯"/><UploadButton/></div>);
};export default Toolbar;

在这里插入图片描述

事件传播

事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。

下面这个

包含两个按钮。

和每个按钮都有自己的 onClick 处理函数。你认为点击按钮时会触发哪些处理函数？

import React from 'react';
import { Button as AntdButton } from 'antd';// 定义自定义按钮组件的 props 类型
interface CustomButtonProps {onClick: () => void;children: React.ReactNode;
}// 自定义按钮组件
const CustomButton: React.FC<CustomButtonProps> = ({ onClick, children }) => {const handleClick = () => {onClick();};return (<AntdButton onClick={handleClick} type="primary">{children}</AntdButton>);
};// Toolbar 组件
const Toolbar: React.FC = () => {return (<div className="Toolbar" style={{background:'gray',padding:'20px',}} onClick={() => {alert('你点击了 toolbar ！');}}><CustomButton onClick={() => alert('正在播放！')}>播放电影</CustomButton><CustomButton onClick={() => alert('正在上传！')}>上传图片</CustomButton></div>);
};export default Toolbar;

如果你点击任一按钮，它自身的 onClick 将首先执行，然后父级

的 onClick 会接着执行。因此会出现两条消息。如果你点击 toolbar 本身，将只有父级

的 onClick 会执行。

阻止传播

事件处理函数接收一个事件对象作为唯一的参数。按照惯例，它通常被称为 e ，代表 “event”（事件）。你可以使用此对象来读取有关事件的信息。

这个事件对象还允许你阻止传播。如果你想阻止一个事件到达父组件，你需要像下面 Button 组件那样调用 e.stopPropagation() ：

import React from 'react';
import { Button as AntdButton } from 'antd';// 定义自定义按钮组件的 props 类型
interface CustomButtonProps {onClick: () => void;children: React.ReactNode;
}// 自定义按钮组件
const CustomButton: React.FC<CustomButtonProps> = ({ onClick, children }) => {const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {e.stopPropagation();onClick();};return (<AntdButton onClick={handleClick} type="primary">{children}</AntdButton>);
};// Toolbar 组件
const Toolbar: React.FC = () => {return (<div className="Toolbar" style={{background:'gray',padding:'20px',}} onClick={() => {alert('你点击了 toolbar ！');}}><CustomButton onClick={() => alert('正在播放！')}>播放电影</CustomButton><CustomButton onClick={() => alert('正在上传！')}>上传图片</CustomButton></div>);
};export default Toolbar;

由于调用了 e.stopPropagation()，点击按钮现在将只显示一个 alert（来自），而并非两个（分别来自和父级 toolbar

）。点击按钮与点击周围的 toolbar 不同，因此阻止传播对这个 UI 是有意义的。

阻止默认行为

某些浏览器事件具有与事件相关联的默认行为。例如，点击表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：

import React from 'react';// Toolbar 组件
const Toolbar: React.FC = () => {return (<div className="Toolbar" style={{background: 'gray', padding: '20px',}}><form onSubmit={() => alert('提交表单！')}><input/><button>发送</button></form></div>);
};export default Toolbar;

你可以调用事件对象中的 e.preventDefault() 来阻止这种情况发生：

import React from 'react';// Toolbar 组件
const Toolbar: React.FC = () => {return (<div className="Toolbar" style={{background: 'gray', padding: '20px',}}><form onSubmit={(e) => {e.preventDefault();alert('提交表单！')}}><input/><button>发送</button></form></div>);
};export default Toolbar;