如何在React JS中使用事件？

我会带着你远行 2023-03-05 12:35 6阅读 0赞

Today, we will talk about **how to use events in React JS?** In this article, we will look at a **simple example of how to implement events in React JS?**

今天，我们将讨论**如何在React JS中使用事件？** 在本文中，我们将看一个**如何在React JS中实现事件**的**简单示例？**

At times, we look at React JS to be too difficult and equally difficult to debug because of its rules and conventions. The truth is if you can master the rules/syntax or conventions, React JS will be at your fingertip.

有时，由于它的规则和约定，我们认为React JS太难了，同样难以调试。 事实是，如果您可以掌握规则/语法或约定，React JS唾手可得。

You should have a basic understanding of Node.js and React JS to understand this article.

您应该对Node.js和React JS有基本的了解，以理解本文。

**Events** help the user interact with the web page. The events used in React JS are JavaScript events (Vanilla JS).

**事件可**帮助用户与网页进行交互。 React JS中使用的事件是JavaScript事件(Vanilla JS)。

**Rules:**

**规则：**

*  **Event handlers in React JS** are enclosed in curly braces when writing with the event.
    
    在编写事件时**，React JS**中的**事件处理程序用**大括号括起来。
 *  **Events in React JS** are written in **camel case**. For example (**onClick**, **onMouseOver**).
    
    **React JS**中的**事件以** **驼峰**形式编写。 例如( **onClick** ， **onMouseOver** )。

In your **"src" folder** from your create react app template, open the **App.js** file and type the following,

在您的create react应用程序模板的**“ src”文件夹中** ，打开**App.js**文件并输入以下内容，

import React from "react"
    import Giphy from './giphy.gif'
    
    function go () {
        
    	alert ('please stop crying baby');
    }
    
    class App extends React.Component{
        
    	render() {
        
    		return (
    			<div> 
    				<center>
    				<img src= {
        Giphy} alt="crying you" onMouseOver = {
        go} />
    				</center>
    			</div>
    		)
    	}
    }
    export default App

**Output:**

**输出：**

![Events in React JS | Example Output][Events in React JS _ Example Output]

**Conclusion:**

**结论：**

The code above creates a React JS app as seen above and uses the **onMouseOver event** which pops an alert on the browser when the mouse pointer hovers over the image.

上面的代码创建了一个如上所述的React JS应用程序，并使用**onMouseOver事件** ，当鼠标指针悬停在图像上方时，该**事件**会在浏览器上弹出警报。

Take note of the **camel case notation of events in React JS** and the **curly braces around the event handlers**.

注意**React JS中事件**的**驼峰表示法**以及**事件处理程序周围的花括号** 。

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.

感谢您与我编码！ 下次见。 随意发表评论或问题。

> 翻译自: [https://www.includehelp.com/react-js/how-to-use-events-in-react-js.aspx][https_www.includehelp.com_react-js_how-to-use-events-in-react-js.aspx]

[Events in React JS _ Example Output]: /images/20230208/0026881e64dd42f8be1eb091ba869cd9.png
[https_www.includehelp.com_react-js_how-to-use-events-in-react-js.aspx]: https://www.includehelp.com/react-js/how-to-use-events-in-react-js.aspx