資料結構
網路
關係資料庫管理系統 (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+
