备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【第33期】一文学会用React事件

2024-01-08 22
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【第33期】一文学会用React事件

概述

React事件是指在React组件中，通过绑定事件处理函数来响应用户的操作或其他事件的触发。React中的事件处理方式与传统的HTML事件处理方式略有不同。

  • 在React中，可以通过在组件元素上添加特定的属性来绑定事件处理函数。常用的事件属性包括onClick、onSubmit、onKeyDown等，它们分别对应不同的用户操作或事件触发。
  • 当用户执行相应的操作或事件触发时，React会调用绑定的事件处理函数，并将事件对象作为参数传递给该函数。开发者可以在事件处理函数中编写相应的逻辑，来处理事件触发后的操作。
  • React事件处理函数的写法通常是在组件的类定义中，通过箭头函数或普通函数的方式来定义。在事件处理函数中，可以通过this关键字来引用组件的实例，从而可以访问组件的状态和属性。

总结起来，React事件是通过绑定事件处理函数来响应用户操作或其他事件触发的方式。开发者可以在事件处理函数中编写相应的逻辑，来处理事件触发后的操作。

React事件

React提供了一系列的事件，用于处理用户操作或其他事件的触发。通过绑定这些事件处理函数，可以实现丰富的交互效果和用户体验。以下是React中常用的事件及其详细说明：

  • onClick：当元素被点击时触发。可以通过事件处理函数来处理点击事件。

案例(点击按钮，改变状态)

import React, { useState } from 'react';
function ButtonExample() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>点击次数: {count}</p>
      <button onClick={handleClick}>点击增加</button>
    </div>
  );
}
export default ButtonExample;
  • onChange：当元素的值发生改变时触发。常用于处理输入框、下拉列表等表单元素的变化。可以通过事件处理函数来获取元素的新值。

案例(输入框实时更新状态)

import React, { useState } from 'react';
function InputExample() {
  const [text, setText] = useState('');
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>当前输入内容: {text}</p>
    </div>
  );
}
export default InputExample;
  • onSubmit：当表单提交时触发。常用于处理表单提交事件。可以通过事件处理函数来获取表单的数据，并进行相应的处理。

案例(表单提交处理)

import React, { useState } from 'react';
function FormExample() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('提交表单:', name, email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        姓名:
        <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      </label>
      <br />
      <label>
        邮箱:
        <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}
export default FormExample;
  • onMouseOver、onMouseOut：当鼠标移动到元素上方或移出元素时触发。常用于处理鼠标悬停事件。可以通过事件处理函数来改变元素的样式或执行其他操作。

以下是React中使用onMouseOver和onMouseOut事件的案例

import React, { useState } from 'react';
function MouseExample() {
  const [isHovered, setIsHovered] = useState(false);
  const handleMouseOver = () => {
    setIsHovered(true);
  };
  const handleMouseOut = () => {
    setIsHovered(false);
  };
  return (
    <div
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      style={{
        width: '200px',
        height: '200px',
        backgroundColor: isHovered ? 'red' : 'blue',
      }}
    >
      {isHovered ? '鼠标悬停' : '鼠标离开'}
    </div>
  );
}
export default MouseExample;

在上述示例中，当鼠标悬停在div元素上时，背景颜色变为红色，当鼠标离开时，背景颜色变为蓝色。通过useState钩子来管理isHovered状态，当鼠标悬停时，调用handleMouseOver函数将isHovered设置为true，当鼠标离开时，调用handleMouseOut函数将isHovered设置为false。根据isHovered的值来动态改变div元素的背景颜色和显示文本。这个案例展示了如何使用onMouseOver和onMouseOut事件来实现鼠标悬停效果，通过绑定事件处理函数来改变组件的状态和样式。

  • onKeyDown、onKeyUp：当键盘按键按下或松开时触发。常用于处理键盘事件。可以通过事件处理函数来获取按键的键码，并根据需要执行相应的操作。

以下是React中使用onKeyDown和onKeyUp事件的案例：

import React, { useState } from 'react';
function KeyboardExample() {
  const [keyPressed, setKeyPressed] = useState('');
  const handleKeyDown = (event) => {
    setKeyPressed(event.key);
  };
  const handleKeyUp = () => {
    setKeyPressed('');
  };
  return (
    <div>
      <input
        type="text"
        onKeyDown={handleKeyDown}
        onKeyUp={handleKeyUp}
        placeholder="按下键盘按键"
      />
      <p>当前按键: {keyPressed}</p>
    </div>
  );
}
export default KeyboardExample;

在上述示例中，当用户按下键盘的按键时，会将按键的值更新到keyPressed状态中，并在页面上显示出来。当用户松开按键时，会将keyPressed状态重置为空字符串。通过使用useState钩子来管理keyPressed状态，通过onKeyDown事件监听键盘按键的按下，调用handleKeyDown函数将按键的值设置为keyPressed状态的值。通过onKeyUp事件监听键盘按键的松开，调用handleKeyUp函数将keyPressed状态重置为空字符串。这个案例展示了如何使用onKeyDown和onKeyUp事件来监听键盘按键的按下和松开，并根据按键的值来更新状态和显示当前按键。

  • onFocus、onBlur：当元素获得焦点或失去焦点时触发。常用于处理元素的焦点事件。可以通过事件处理函数来改变元素的样式或执行其他操作。

以下是React中使用onFocus和onBlur事件的案例：

import React, { useState } from 'react';
function FocusExample() {
  const [isFocused, setIsFocused] = useState(false);
  const handleFocus = () => {
    setIsFocused(true);
  };
  const handleBlur = () => {
    setIsFocused(false);
  };
  return (
    <div>
      <input
        type="text"
        onFocus={handleFocus}
        onBlur={handleBlur}
        placeholder="点击输入框"
      />
      <p>{isFocused ? '输入框已获得焦点' : '输入框失去焦点'}</p>
    </div>
  );
}
export default FocusExample;

在上述示例中，当用户点击输入框时，输入框获得焦点，isFocused状态被设置为true。当用户点击其他地方，输入框失去焦点，isFocused状态被设置为false。通过使用useState钩子来管理isFocused状态，通过onFocus事件监听输入框获得焦点的事件，调用handleFocus函数将isFocused设置为true。通过onBlur事件监听输入框失去焦点的事件，调用handleBlur函数将isFocused设置为false。这个案例展示了如何使用onFocus和onBlur事件来监听输入框的焦点状态，并根据焦点状态来更新状态和显示相应的文本。

  • onScroll：当元素滚动时触发。常用于处理滚动事件。可以通过事件处理函数来获取滚动的位置或执行其他操作。

下面是一个简单的React onScroll案例：

import React, { useState } from 'react';
const App = () => {
  const [scrollTop, setScrollTop] = useState(0);
  const handleScroll = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    setScrollTop(scrollTop);
  };
  window.addEventListener('scroll', handleScroll);
  return (
    <div>
      <h1>Scroll Top: {scrollTop}</h1>
      <div style={{ height: '2000px' }}></div>
    </div>
  );
};
export default App;

在这个例子中，我们使用useState hook来跟踪scrollTop的值。在handleScroll函数中，我们通过window.pageYOffset或document.documentElement.scrollTop获取滚动条的位置，并将其设置为scrollTop的值。然后，我们在组件的返回部分显示scrollTop的值，并在一个高度为2000px的div元素上设置滚动条。最后，我们通过addEventListener在window上监听scroll事件，并在滚动时调用handleScroll函数。这个例子展示了如何使用React来实现在滚动时获取滚动条位置的功能。你可以根据自己的需求进行修改和扩展。

  • onLoad、onError：当元素加载完成或加载失败时触发。常用于处理图片或其他资源的加载事件。可以通过事件处理函数来处理加载成功或失败的情况。

下面是一些使用React中的onLoad和onError事件的案例：

  1. 图片加载成功时触发onLoad事件：
import React from 'react';
function App() {
  const handleImageLoad = () => {
    console.log('Image loaded successfully');
  };
  return (
    <div>
      <img src="path/to/image.jpg" onLoad={handleImageLoad} />
    </div>
  );
}
export default App;
  1. 图片加载失败时触发onError事件：
import React from 'react';
function App() {
  const handleImageError = () => {
    console.log('Image failed to load');
  };
  return (
    <div>
      <img src="path/to/nonexistent_image.jpg" onError={handleImageError} />
    </div>
  );
}
export default App;
  1. 使用React组件加载成功时触发onLoad事件：
import React from 'react';
function MyComponent() {
  const handleComponentLoad = () => {
    console.log('Component loaded successfully');
  };
  return (
    <div onLoad={handleComponentLoad}>
      // Component content
    </div>
  );
}
export default MyComponent;
  1. 使用React组件加载失败时触发onError事件：
import React from 'react';
function MyComponent() {
  const handleComponentError = () => {
    console.log('Component failed to load');
  };
  return (
    <div onError={handleComponentError}>
      // Component content
    </div>
  );
}
export default MyComponent;

这些例子展示了如何在React中使用onLoad和onError事件来处理图片和组件加载的成功和失败情况。你可以根据需要进行修改和扩展。

  • onDoubleClick：当元素被双击时触发。常用于处理双击事件。可以通过事件处理函数来执行相应的操作。

下面是一个使用React中的onDoubleClick事件的案例：

import React from 'react';
function App() {
  const handleDoubleClick = () => {
    console.log('Double clicked');
  };
  return (
    <div onDoubleClick={handleDoubleClick}>
      Double click here
    </div>
  );
}
export default App;

在上面的例子中，当用户在div元素上进行双击操作时，会触发handleDoubleClick函数，并在控制台中打印"Double clicked"。你可以根据需要修改事件处理函数的具体逻辑。

  • onContextMenu：当用户右键点击元素时触发。常用于处理右键菜单事件。可以通过事件处理函数来显示自定义的右键菜单或执行其他操作。

下面是一个使用React中的onContextMenu事件的案例：

import React from 'react';
function App() {
  const handleContextMenu = (event) => {
    event.preventDefault();
    console.log('Context menu opened');
  };
  return (
    <div onContextMenu={handleContextMenu}>
      Right click here
    </div>
  );
}
export default App;

在上面的例子中，当用户在div元素上右击时，会触发handleContextMenu函数，并阻止默认的上下文菜单弹出。然后在控制台中打印"Context menu opened"。你可以根据需要修改事件处理函数的具体逻辑。

  • onTouchStart、onTouchMove、onTouchEnd：当用户在触摸屏上触摸元素时触发。常用于处理触摸事件。可以通过事件处理函数来获取触摸的位置或执行其他操作。

下面是一个使用React中的onTouchStart、onTouchMove和onTouchEnd事件的案例：

import React from 'react';
function App() {
  const handleTouchStart = (event) => {
    console.log('Touch start');
  };
  const handleTouchMove = (event) => {
    console.log('Touch move');
  };
  const handleTouchEnd = (event) => {
    console.log('Touch end');
  };
  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      Touch me
    </div>
  );
}
export default App;

在上面的例子中，当用户在div元素上开始触摸屏幕时，会触发handleTouchStart函数，并在控制台中打印"Touch start"。当用户在屏幕上移动手指时，会触发handleTouchMove函数，并在控制台中打印"Touch move"。当用户从屏幕上抬起手指时，会触发handleTouchEnd函数，并在控制台中打印"Touch end"。你可以根据需要修改事件处理函数的具体逻辑。

文章标签：
前端开发
开发者
UED
关键词：
React Native事件
react.js事件
答神~
目录
相关文章
桃李春风一杯酒
|
14小时前
|
存储 前端开发 JavaScript
【亮剑】如何处理 React 中的 onScroll 事件？
【4月更文挑战第30天】在React中，处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`，通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表，当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验，同时要注意性能优化。
桃李春风一杯酒
6 0
还在路上的秃头
|
4天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件：Vue与React中的行为差异解析
深入比较Input、Change和Blur事件：Vue与React中的行为差异解析
还在路上的秃头
9 0
天玄TX
|
29天前
|
前端开发 JavaScript 开发者
如何在React中监听键盘事件
如何在React中监听键盘事件
天玄TX
34 0
demo123567
|
3月前
|
前端开发 JavaScript Java
react事件机制
react事件机制
demo123567
39 0
雪碧有白泡泡
|
3月前
|
前端开发 JavaScript
快速上手React：从概述到组件与事件处理
快速上手React：从概述到组件与事件处理
雪碧有白泡泡
56 0
一个车迷
|
4月前
|
前端开发 JavaScript 开发者
说说react的事件机制？
React的事件机制是一种用于处理用户界面事件的方式，它建立在原生DOM事件的基础上，提供了一种更高级、更一致的方式来处理事件。
一个车迷
13 0
晚来南风晚相识
|
4月前
|
前端开发
React中事件的绑定
React中事件的绑定
晚来南风晚相识
22 0
天界程序员
|
4月前
|
前端开发 JavaScript
第九章 React中的事件处理
第九章 React中的事件处理
天界程序员
26 1
北海屿鹿
|
5月前
|
前端开发 开发者
React合成事件的原理是什么
React合成事件的原理是什么
北海屿鹿
52 0
北海屿鹿
|
5月前
|
前端开发 JavaScript UED
React事件和原生事件的执行顺序
React事件和原生事件的执行顺序
北海屿鹿
32 0