数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 ReactJS 中向组件传递事件处理程序？
Reactjs 是一个开源的 Javascript 库，用于 Web 开发，构建网站上的交互式页面。Reactjs 提供用户友好的、声明式的和精确的。
组件
组件是 React js 中独立的、可重用的代码片段。它有助于为我们的类和函数创建单独的文件。通常，组件分为两种类型：类组件和函数组件。
事件处理程序
事件处理程序定义了当事件触发时要执行的操作。React 中的事件以“on”开头，例如 onClick 和 onFocus。
React 中的事件处理程序就像 HTML 中的 DOM 一样，React 也有相同的处理程序（点击、鼠标和悬停等）。
注意：React 中的所有事件都使用驼峰命名法命名，React 处理程序应写在花括号中。
要使用 React，首先需要使用以下语句导入“react”库：
import React from "react"
也导入 dom 元素为：
import ReactDom from 'react-dom/client';
有各种类型的事件处理程序，它们是：
事件处理程序：
内联事件处理程序：
回调事件处理程序：
向组件传递（普通）事件处理程序
首先，我们将从 React 中的 onClick 事件处理程序开始，这是如何在 React 中使用事件处理程序操作事件的最基本示例。按钮具有 onClick 属性，该属性接收函数。每次触发事件时都会调用此函数。
示例 1
以下是事件处理程序的示例。在 UI 中，我们创建一个名为“点击我”的按钮，并将 onClick 事件与show()方法链接。
因此，单击按钮时将执行此方法的内容。在此函数中，我们编写代码以显示警报消息。
单击按钮时，将触发“onClick”事件，这将显示您的姓名。
<button onClick={show} > show is a function </button> import React from "react" import ReactDom from ‘react-dom/client’; function showName() { Const show = ()=>{ alert("your Name"); } return(<button onClick={show} >click me</button>); }; Const root = ReactDom.createRoot(document.getElementById(‘root’)); root.render(<showName /> )
示例 2
让我们来看另一个示例，这里我们对数字执行递增和递减操作。
App.js
import './App.css'; import react,{useState} from "react"; function App() { const [count, setCount] = useState(0) // this function which computes the increment and decrement, initial value of count is 0 const inc = () => { setCount(count + 1); } const dec = () => { setCount(count - 1); } const handleChange = (e)=>{ setCount(e.target.value); } return ( <div className="App"> <button className='inc' type='button' onClick={inc}> + </button> <input type="text" value={count} onChange={handleChange}/> <button className='dec' type='button' onClick={dec}> - </button> </div> ); } export default App;
您还可以将以下 CSS 代码添加到此应用程序中。将其保存为 App.css 并将其导入到您的 App.js 中：import "./App.css";
在下面的示例中，不支持浮点型数据类型，如果将浮点值作为参数传递，则计算结果为 false。isSafeInteger()方法只支持其范围内的整数值，否则返回 false。
.App{ display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .inc{ background: green; color: red ; font-size: 20px; } .dec{ background: red; color: green; font-size: 20px; } input{ background-color: aquamarine; font-size: 20px; }
向组件传递内联事件处理程序
内联事件处理程序也称为内联处理程序。它将传递到 html 标签中，内联事件处理程序易于传递，我们无需调用单独的函数。
示例
以下是内联事件处理程序的示例。我们通过内联方式调用两个函数。第一个是增加计数，第二个是减少计数。
<button onClick={show} > show is a function </button> import React from 'react'; function App() { const [count, setCount] = React.useState(0); return ( <div className="App"> Count: {count} <button type="button" onClick={() => setCount(count + 1)} > Increase Count </button> <button type="button" onClick={() => setCount(count - 1)} > Decrease Count </button> </div> ); } export default App;
您还可以将以下 CSS 代码添加到此App.css中，并将其导入到您的 App.js 中：import "./App.css"; 然后它看起来与给定的输出相同。
button{ background-color: green; color: aliceblue; padding: 10px; margin: 10px; border-radius: 5px; }
向处理程序传递回调事件处理程序
最后但并非最不重要的一点是，回调事件处理程序或回调处理程序。当需要与父组件通信的子组件时，它们被称为回调事件处理程序。
示例
以下是回调事件处理程序的示例。
<button onClick={show} > show is a function </button> import React from 'react'; function App() { const [text, setText] = React.useState(''); function handleTextChange(event) { setText(event.target.value); } return ( <div className="App"> <div><MyInput inputValue={text} onInputChange={handleTextChange} /> {text} </div> </div> ); } function MyInput({ inputValue, onInputChange }) { return ( <input type="text" value={inputValue} onChange={onInputChange} /> ); } export default App;
结论
React 事件处理程序类似于 html 事件处理程序，只是语法略有不同，易于使用“this”关键字在两者中都很常见。这是 JavaScript 行为，而不是 React 行为。Reactjs 是一个 JavaScript 库。我们已经讨论了使用“click”进行事件处理，但是还有许多其他事件处理程序，所有上述规则也适用于它们。
浏览量 1K+
