如何在 ReactJS 中将事件处理程序传递给组件?
ReactJS 是一个开源 JavaScript 库，用于在 Web 开发中构建交互式页面。ReactJS 提供用户友好、声明式且精确的开发方式。
组件
组件是 ReactJS 中独立且可复用的代码片段。它有助于为类和函数创建单独的文件。通常，组件分为两种类型:类组件和函数组件。
事件处理程序
事件处理程序定义在触发事件时要执行的操作。 React 中的事件以"on"开头，例如 onClick 和 onFocus。
React 中的事件处理程序类似于 HTML 中的 DOM，React 也具有相同的处理程序 -(点击、鼠标和悬停等)。
注意-React 中的所有事件均使用驼峰命名法命名，并且 React 处理程序应使用花括号括起来。
要使用 React，首先需要使用以下语句导入库"react"-
从"react"导入 React
同时导入 dom 元素为 -
导入ReactDom 来自"react-dom/client";
事件处理器有多种类型 -
事件处理器 -
内联事件处理器 -
回调事件处理器 -
将(常规)事件处理器传递给组件
首先，我们将从 React 中的 onClick 事件处理器开始，这是如何在 React 中使用事件处理器操作事件的最基本示例。按钮具有 onClick 属性，用于接收函数。每次触发事件时都会调用此函数。
示例 1
以下是事件处理器的示例。在 UI 中，我们创建了一个名为"click me"的按钮，并将 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 行为。React.js 是一个 JavaScript 库。我们讨论了使用"click"进行事件处理，但还有许多其他事件处理器，上述所有规则也适用于它们。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
