React事件处理与普通JS一起使用
React事件处理是指在React组件中处理用户交互的动作，比如点击、输入等。React提供了一种简洁且高效的方式来处理事件，与普通的JavaScript事件处理相比，有一些区别和优势。
React事件处理的基本原理是通过在组件中定义事件处理函数，并将其绑定到相应的DOM元素上。当用户触发事件时，React会调用相应的事件处理函数，并传递事件对象作为参数。开发者可以在事件处理函数中编写逻辑来响应用户的操作。
与普通的JavaScript事件处理相比，React事件处理有以下优势：
- 组件化：React事件处理是基于组件的，可以将事件处理函数与特定的组件关联起来。这样可以更好地组织代码，提高代码的可维护性和复用性。
- 虚拟DOM更新：React使用虚拟DOM来管理页面的渲染，当事件触发时，React会自动更新相关的组件，而无需手动操作DOM。这样可以提高性能，减少不必要的DOM操作。
- 自动绑定this：React会自动将事件处理函数中的this绑定到组件实例上，无需手动绑定或使用箭头函数。这样可以简化代码，减少错误。
- 事件委托：React使用事件委托的方式来处理事件，将事件绑定在父元素上，通过事件冒泡机制来处理子元素的事件。这样可以减少事件绑定的数量，提高性能。
React事件处理的应用场景非常广泛，可以用于开发各种类型的Web应用，包括单页应用、多页应用、移动应用等。通过事件处理，可以实现用户交互、表单验证、数据更新等功能。
对于React事件处理，腾讯云提供了一系列相关产品和服务，包括：
- 腾讯云云服务器（CVM）：提供稳定可靠的云服务器，用于部署React应用。
- 腾讯云云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库，用于存储React应用的数据。
- 腾讯云对象存储（COS）：提供安全可靠的对象存储服务，用于存储React应用的静态资源。
- 腾讯云CDN加速（CDN）：提供全球分布式的内容分发网络，加速React应用的访问速度。
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，可以与React应用集成，实现图像识别、语音识别等功能。
以上是腾讯云相关产品和服务的简介，更多详细信息可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
我正在寻找一个在React.js中处理冒泡和捕获的例子。我找到了，但我很难找到React.js的等价物。
如何在React.js中创建冒泡和捕获示例？
浏览 6提问于2015-12-30得票数 51
回答已采纳
嘿，伙计们，我在React.js上尝试了一下，我找到了一个事件监听器的例子。
import React from 'react';
import ReactDOM from 'react-dom';
function makeDoggy(e) {
// Call this extremely useful function on an <img>.
// The <img> will become a picture of a doggy.
e.target.setAttribute('src', '
浏览 3提问于2018-12-07得票数 0
我是新来React的，只是关于react事件中的一个怪癖的问题。我知道JSX是html和js的混合体，下面是一个例子：
<button onClick={this.handleClick}>Click</button>
但在html中，它是：
<button onclick="handleClick()">Click</button>
那么为什么React要求第二个单词的第一个字母大写呢？为什么它不能成为
<button onclick={this.handleClick}>Click</button>
浏览 0提问于2019-10-25得票数 1
在我的PayPal Sandbox应用程序中，它要求返回url：
现在，我正在@paypal/react-paypal-js包中使用@paypal/react-paypal-js函数&如果调用它，就执行路由器推送。我还需要在paypal后端上设置这个参数吗？有什么不同吗？
我也不明白它现在说的是什么：
nativexo://paypalpay
？这是什么意思？
浏览 21提问于2022-10-17得票数 0
在React中，我们使用setState更新组件的状态。setState是一个异步进程，所以如果我们在同一个函数中有多个setState。
问题：如何在内部处理更新的批处理？
场景1:
在componentDidMount中的for循环中更新状态，但在相同的执行周期中更新状态。
class TodoApp extends React.Component {
constructor(props) {
super(props)
var state = { count: 0 };
Object.defineProperty(this, 'state'
浏览 0提问于2019-09-10得票数 1
回答已采纳
2回答
在尝试从React 15.4升级到React 16.4.1 (也将react升级到16.4.1)之后，我从路由器获得了以下错误消息：
TypeError: _nextProps.children is not a function
at ReactDOMServerRenderer.render (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2491:55)
at ReactDOMServerRenderer.read (/var/www/web/node_module
浏览 0提问于2018-07-02得票数 5
回答已采纳
我试图用我在语义-UI-react代码中使用的相同功能来成功地表达语义-UI代码。任何帮助都将不胜感激。
这就是我所拥有的：
类预览扩展React.Component { componentDidMount() { const update = () => { this.dest.textContent = this.src.innerHTML.replace(/</g，'\n<')；}；setInterval(update，300)；update()；} render() { return ( <div ref={( src ) => Objec
浏览 30提问于2018-08-08得票数 0
回答已采纳
我正在用electron-forge构建一个应用程序，除了在我的项目配置中将.babelrc扩展到.compilerc之外，这并不重要。
我使用和来别名对react到inferno-compat的引用
.compilerc / .babelrc
"plugins": ["babel-plugin-inferno", "transform-async-to-generator", "transform-es2015-classes",
["module-resolver", {
浏览 1提问于2017-11-13得票数 1
我想在事件处理程序中使用一个突变。我的事件定义如下：
(JSX attribute) onOk?: ((e: React.MouseEvent<any, MouseEvent>) => void) | undefined
这就是我如何称呼客户端的突变
export const IMPORT_INFO_MUTATION = gql`
mutation ImportPolicy($data: ImportPolicyInput!) {
importPolicy(data:$data)
{
_id
name
}
}
最后，我这样
浏览 0提问于2019-05-19得票数 2
回答已采纳
我想要实现的是，我想要将post请求发送到节点服务器，然后从post request中提取主体，然后用 body 从post请求中提取出我的react应用程序(其中包含路由)
在我在react应用程序中创建的服务器中，我使用了以下代码
import express from "express";
import fs from "fs";
import path from "path";
import React from "react";
import ReactDOMServer from "react-dom/s
浏览 1提问于2021-07-29得票数 0
1回答
类型记录1.8现在支持非类型化的JS文件。要启用此功能，只需添加编译器标志
通过
我正在尝试导入没有键入文件的。
import * as injectTapEventPlugin from 'injectTapEventPlugin';
说模块找不到。所以我试着：
import * as injectTapEventPlugin from '../node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js';
这说明模块解析为非模块实体，不能使用此结构导入。然后我试着：
import
浏览 3提问于2016-02-04得票数 12
1回答
我对react.js非常陌生，我想使用react js来准备折线图，而不使用其他js文件。
可以只用react.js创建一个吗？
在互联网上展示的例子有D3组件、chart.js等。我不确定这些是否是react.js的子产品。我希望尽可能避免其他js文件，只使用react.js。
浏览 0提问于2017-09-07得票数 2
所以我用了一个叫做react的组件，方法如下.
<div>
<Search items={ITEMS} />
</div>
这将在<input>内部创建<div>，在<div>中创建<div>。我需要将支柱onKeyDown={ this.myMethod }添加到<input>中。实现这一目标的最佳途径是什么？我有一种感觉，编辑node_modules内部的代码不是答案。谢谢!
浏览 3提问于2016-09-27得票数 0
回答已采纳
我有点困惑，以下是如何工作的？我先发密码，
html
<form>
<input type="text" id="guessInput" placeholder="A0" />
<input type="button" id="fireButton" value="Fire!" />
</form>
js
function handleFireButton(){
console.log("
浏览 2提问于2016-01-05得票数 0
回答已采纳
1回答
为什么我的div卷轴不能工作？
、、、、
每当用户单击index.js文件时，我希望页面滚动到index.js文件中的index.js类名。现在，我的屏幕是空白的，在我点击cmd + s和cmd + r之后，屏幕上什么都没有。
这是我的index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>My practice web app</title>
<meta charset="utf-8">
<meta name="viewport" conten
浏览 2提问于2017-01-26得票数 0
回答已采纳
考虑以下几乎相同的两个片段。
区别是：
第一个使用setTimeout()触发事件。
第二个按钮在单击按钮时触发该事件。
如果您检查控制台，您将看到代码片段1中的最后两行是：
App rendering 1 folder(s)
Observed js
在片段2中有：
Observed js
App rendering 1 folder(s)
问题：为什么顺序颠倒了？
代码片段1: setTimeout()触发器
class App extends React.Component {
constructor() {
super();
thi
浏览 4提问于2017-03-07得票数 3
回答已采纳
1回答
正如问题中所述，我试图在MaterializeCSS/React中使用，网页呈现如下所示：
文本是灰色的，我不能点击或与它交互。这是我的相关代码：
我已包括：
import ReactDOM from 'react-dom';
import $ from 'jquery';
我的componentDidMount()方法如下所示：
componentDidMount() {
var element = ReactDOM.findDOMNode(this.refs.dropdown)
$(element).ready(function() {
浏览 3提问于2017-12-28得票数 0
回答已采纳
3回答
我试着学习角质。我创建了一个简单的视图如下：
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src
浏览 4提问于2015-11-02得票数 1
回答已采纳
首先，我使用初始化一个模板，使用npx create-react-app my-app来响应应用程序
然后，我修改项目，下面是我的项目目录，其中my-app是根目录：
我的应用node_modulespublic index.htmlmanifest.jsonrobots.txt
- src
- components
- `Main.js`
- `Navbar.js`
- fonts
- images
- `App.js`
- `index.js`
- `style.css`
- `package-lock
浏览 8提问于2022-09-18得票数 0
在React中，有人能解释我，对于CSS伪类(例如。悬停，集中，积极等)，为什么我要去状态变化的反应？为什么不像我们在CSS中那样反应开发人员保持这种风格呢？
浏览 1提问于2017-01-27得票数 0
回答已采纳
下面是演示问题的代码片段：
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div contentEditable="true">
<p>
<span onKeyDown={(e)=>{
alert("hello world!!")
浏览 11提问于2022-06-08得票数 3
我是一个很新的反应本土和开发一个非常简单的游戏。这个游戏由三个不同的选项卡组成，通过使用底部标签导航。
以下是我在这个游戏中使用的不同选项卡。
屏幕1:
屏幕2:
屏幕3:
，我的主要问题是：，如果有人按下Screen2中的Weapon1按钮，它将调用在Game.js文件中定义的weaponOne()函数。它应该将全局状态变量enemyBar的当前状态更新为enemyBar = enemyBar - 0.1，并相应地更新屏幕1和2中的UI。同样，如果用户按下屏幕3中的QuickFix，它将调用quickFix()并将状态变量从hpBar更改为hpBar = hpBar + 0.1，并更新
浏览 5提问于2020-04-21得票数 0
1回答
使用JQuery的简单AJAX测试页面。显示的页面最初显示按钮(BUTTON1)。单击时，它将通过react.php运行script.js。react.php将通过span元素用BUTTON2代替BUTTON1。所有这些都有效。
这是出问题的地方。单击BUTTON2应该通过script2.js运行react2.php。然后react2.php应该将BUTTON2替换为文本"SUCCESS“。但是，当单击BUTTON2时，页面会刷新(并再次显示BUTTON1 )。
当初始beginning.php页面上的按钮类从button1更改为button2时，按钮将成功地替换为react2.php
浏览 0提问于2013-10-20得票数 0
回答已采纳
**我的代码正在做的事情：**
当sendprops值注册时，显示带有呈现电子邮件和确认密码组件的注册页面，并发送注册api请求，同样用于登录。
实际上，我是个新手，刚开始做一个小项目，就是登录和注册。
我的代码：
const Form = ({ sendprop }) => {
const [formValue, setFormValue] = useState({
name: "",
email: "",
password: "",
confirmPassword: "",
});
浏览 5提问于2022-10-03得票数 0
2回答
我正在学习redux，为了调试目的，我在Chrome中安装了它们的调试扩展。除了我的代码不起作用外，为什么显示存储数据的扩展没有被const store = createStore(counter);初始化
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import App f
浏览 6提问于2020-08-18得票数 0
回答已采纳
我有以下react组件，我正尝试在next.js中实现它。
React组件：
import React from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";
import Dashboard from "../../pages/dashboard";
import Profile from "../../pages/profile";
function Layout(props) {
return (
浏览 2提问于2019-09-20得票数 1
我想fadeToggle div container中的所有内容，而不是链接，而不是类to_top的div。但是使用下面的代码，div container传真中的所有内容都可以进行切换。我哪里错了？
这是我的代码：
$("#container").not(".to_top", "a").on('tap', function(e) {
$("#headline").fadeToggle(700);
$("#headline_tap").fadeToggle();
});
这是我的htm
浏览 5提问于2014-07-20得票数 1
回答已采纳
我有点confused...Do公司使用HTML/CSS，然后添加react.js到它，还是他们只是使用react.js+ JSX + css只用于建设网站？
浏览 4提问于2022-06-21得票数 -1
在React文档中，onLoad事件列在"Image“项下，没有太大的影响。与jQuery的.load()文档相比，它列出了大量的注意事项，以及对库(如 )的需求。
我的问题是，React中的onLoad事件是否与在jQuery中有相同的警告，或者它是否处理所有边缘情况并消除对库的需求，比如上面提到的库。
浏览 2提问于2016-10-14得票数 4
回答已采纳
我试图将文本字段中的键输入限制为数字、后退空间或空格，因此在设置状态之前进行检查，并在其他情况下防止事件的默认行为，但无法找到事件的event.which属性或keyCode属性。
我尝试event.persist()查看，但仍然一样，在event中没有一个名为which的属性。
which在nativeEvent of event中有，但始终是0。
这里是我的app.js中的组件，我使用的是资料-ui的文本字段，而不是正常的输入。
MobileNumber.tsx
import React from 'react';
import { TextField } from
浏览 2提问于2020-08-17得票数 5
回答已采纳
我有一个项目，它由服务器端代码(在nodejs中)和客户端代码(带有react)组成。我有单独的package.json文件，但是我被要求将它们合并成一个。服务器文件位于项目根dir中，客户端在/client文件夹中与其余客户端代码。你能帮我这么做吗？我可以把客户端文件复制到服务器客户端吗？我在上面找不到有用的东西。
package.json：
{
"name": "curr-calc",
"version": "1.0.0",
"description": "currency calc usi
浏览 2提问于2018-04-03得票数 0
每天我都要面对很多Android React Native上crashlytics的生产模式的崩溃报告。在开发模式下不可能检测到这种崩溃。只是来自firebase的堆栈跟踪。所有这些堆栈都描述了原生Java方面正在发生的事情。通过异常的名称，我们可以假定错误的大致原因。在崩溃之前调用的一些方法，以及对您没有任何帮助的行数。更多的方法可以在应用程序的许多地方调用，甚至在第三方库中也可以调用。在一些幸运的情况下，你可以在GitHub或StackOverflow上找到相同的错误，但它们都是单独的，因为如果它在某个地方工作，并不意味着它在你的情况下也能工作。每天我都试着在我的应用程序的许多地方通过测试
浏览 1提问于2020-11-03得票数 0
我有下面的简单演示一个拖放组件使用React DnD插件。
Card.js (DropSource)
import React, { Component } from 'react';
import { DragSource } from 'react-dnd';
const ItemTypes = {
CARD: 'card'
};
const cardSource = {
beginDrag(props) {
return { };
}
}
function collect(connect, mo
浏览 6提问于2018-05-31得票数 15
我正在尝试使用webpackDevMiddleware，webpackHotMiddleware和express生成器和react来设置webpack开发服务器。我已经把所有的东西都准备好了，但是重装的时候有很大的延迟。 每次在浏览器中我都会收到这条消息 'GET http://localhost:8080/__webpack_hmr
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)' 但是5到10秒后，浏览器将重新加载。在终端中，这些消息显示 GET /7310e23232f92e879547.hot-update.json
浏览 40提问于2019-01-06得票数 3
2回答
在我的Reactjs应用程序中，我使用stripe的支付意图API来处理付款。我使用来自@stripe/react-stripe-js的可嵌入支付元素@stripe/react-stripe-js来呈现UI，但问题是在UI中完全加载支付元素需要几秒钟的时间。
有任何方法可以访问它的加载状态并在加载时显示加载旋转器吗？
浏览 13提问于2022-06-03得票数 3
回答已采纳
我正在构建一个带有React的ads应用程序，在那里我需要显示一些广告。问题如下：
我需要在React组件中显示这些广告，我已经得到了这些广告的html代码，它们工作正常(到目前为止)，但它们抛出了一个很大的警告：
index.js:1375 Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
in a (at ad-display.component.jsx:4)
我确实知道警告的原因是onclick属性，它应该改为onClick，但是我不想弄乱给我的原始HTML代码，以
浏览 0提问于2019-09-04得票数 0
2回答
我正在使用react-router-dom，但我的路由不知何故不起作用。路由不会重定向到组件。我在控制台中没有任何错误，并且我确实安装了npm的react-router-dom。我看不出我做错了什么。你可以在下面找到我的代码。任何帮助都将受到欢迎。 这是我的App.js页面 import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
impor
浏览 16提问于2021-04-08得票数 2
回答已采纳
1回答
我有一个减速器，它隐藏和显示一个模态组件；
import {SHOW_MODAL, HIDE_MODAL } from '../constants/ActionTypes'
import React from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions';
const initialState = {
modalType: null,
modalProps: {}
}
export defau
浏览 2提问于2017-05-31得票数 2
回答已采纳
我知道这个问题被问了很多次，但我找不到答案。任何帮助都将不胜感激，谢谢！
据一篇关于中关于“反应”的文章说：“只管做：
mix.react('src', 'output');
我们将安装所有必要的Babel插件并安装您的.babelrc。
在我的项目中，我现在有一个组件，在我的react文件中我有以下内容：
mix.react('resources/assets/js/basicapp.js', 'public/js');
我的basicapp.js文件是一个简单的组件设置，如下所示：
require('./compone
浏览 1提问于2018-10-17得票数 1
回答已采纳
它是关于formik (react & typescript)的。
我设法让一些代码工作，但我使用的是.bind(this)。我真的认为有更好的方法来做事情，所以我在这里问。
代码如下：
public register(values: IRegistrationForm, { setSubmitting, setFieldError }: FormikActions<IRegistrationForm>) {
axios
.post(process.env.REACT_APP_API_URL + '/register', values
浏览 1提问于2018-12-02得票数 0
假设我有一个带有onclick属性的HTML按钮，它的值是调用一个函数(例如fn)。
function fn() {
document.querySelector("#greeting").innerHTML = "Hello folks";
}
<button type="button" onclick="fn()">Try it</button>
<p id="greeting"></p>
问: onclick属性的类型是什么？我的意思是onclic
浏览 4提问于2021-03-13得票数 1
回答已采纳
我正在尝试将react组件添加到php/js项目中。我添加了一个新的文件夹，创建了一个新的react应用程序并更新了组件。这个组件通过npm start工作得很好，但是我需要将现有的JS文件连接到这个组件，这就是我不确定该如何处理的？必须构建组件吗？如果是，应该如何将其添加到主JS文件中。 仅供参考，尝试在脚本中定义react和babel，但问题是不能使用import，所以我不得不将所有内容都添加到一个文件中，这听起来不是很干净。 如果你有任何想法，我将不胜感激 这是main.js <div id=root></div>
<script src="../
浏览 18提问于2019-02-26得票数 0
创建此页面。我有一个元素，我想在滚动上旋转。更喜欢使用react语法来创建这个“动画”。
LeftGear = () => {
const rotate = window.scrollY / 10 % Math.PI
const divStyle = {
backgroundColor: 'purple',
transform: `scroll(${rotate})`,
}
return <img
className={this.changeClassName('circleImage')}
s
浏览 3提问于2020-09-27得票数 4
index.js(previous)
import React from 'react'
import { render } from 'react-dom'
import { Router, Route } from 'react-router'
import App from './modules/App'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Ro
浏览 1提问于2016-09-29得票数 0
回答已采纳
我遵循了这个简单的教程()来开始使用React和webpack，但在尝试使用更新的语法时遇到了问题。例如，使用ReactDom来调用render，而不是过时的“React.renderComponent”。
我跑过了：
npm install --save react-dom
并添加了
var ReactDom = require('react-dom')
添加到index.jsx文件中并添加了
'react-dom': 'ReactDom'
添加到webpack.config.js中的“外部变量”列表中。(我不确定这是否有必要。)
然而，我得到
浏览 1提问于2016-03-24得票数 3
我正在尝试创建一个模式(弹出)，它可以使用onClick本身内的一个按钮关闭Modal.js。为此，我在useState中创建Parent.js，并通过以下方式将closeModal函数(更新父状态)传递给Modal.js。道具；
无论出于什么原因，onClick事件都不会更新父级的状态。它设法触发从道具中接受的closeModal函数)。从console.log中，我可以看到closeModal函数正在运行，但是Parent.js状态仍然没有改变，所以Modal没有关闭。其他事件，如、onMouseDown、或onChange都可以正常工作，而Modal get应该关闭。
你能解释一下为什么
浏览 4提问于2021-03-29得票数 1
回答已采纳
1回答
我很难弄清楚如何在我的反应路由器中正确地实现onChange。我要做的是改变，我想重定向到家。遵循这一守则：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Home from './Home';
import Post_Form from './Post_Form';
import * as Firebase from 'firebase
浏览 2提问于2016-12-03得票数 0
回答已采纳
我使用的是react路由器v4，当浏览器地址栏中的url发生变化时，我可以得到"this.props.history".However、"this.props.history.push("/Anli/"+page)“(在Anli.js中，funtion changePage() )。
但是“this.prop.history.push("/home")”起了作用。我也不知道原因。
谢谢你帮忙。
index.js
import { BrowserRouter as Router, Route, Redirect, Switch} from
浏览 0提问于2018-09-08得票数 0
我在一个测试中遇到了一些问题，我试图测试是否添加了正确的事件侦听器。我已经阅读了相关文档和其他SO问题，但似乎无法解决这个问题。
在包含的代码中，我尝试了3种不同的方法来触发click事件，但都没有成功。我使用Karma作为规范运行者，使用karma-jasmine，使用reactify浏览器，并在Chrome中测试。
我的规范看起来像这样：
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var $ = jQuery = require('jquery')
浏览 3提问于2015-03-27得票数 2
1回答
用事件对象和值模拟(单击)
、、、、
当我试图通过带有值的模拟事件对象传递时，我遇到了一个问题。我正在犯错误：
TypeError: Cannot read property 'value' of null
at SingleSymbol.handleLotChange.event [as handleLotChange] (src/containers/SingleSymbol.js:95:46)
at onClick (src/containers/SingleSymbol.js:145:40)
at node_modules/enzyme-adapter-react-16/build/React
浏览 0提问于2018-06-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
