ReactJS - 輸入事件處理器

---

---

InputEvent 介面通常用於 Web 開發中，用於建立諸如表單欄位即時驗證、富文字編輯器或任何需要跟蹤和響應基於文字內容中使用者輸入的應用程式等功能。

語法

<input onBeforeInput={e => console.log('onBeforeInput')} />

React 中的 onBeforeInput 事件型別很重要，因為它允許我們收集和響應可編輯內容的更改。透過一個簡單的 React 應用程式，我們將研究 onBeforeInput 事件及其相關功能。

當可編輯內容發生更改時，例如使用者輸入、刪除或格式化文字時，onBeforeInput 事件會提醒我們的 React 應用程式。它對於建立富文字編輯器、表單欄位和其他互動式基於文字的元件特別有用。

InputEvent 的屬性

在我們進入小型 React 應用程式之前，讓我們瞭解一下 InputEvent 物件的重要屬性，它是 onBeforeInput 事件的一部分。

• data − 輸入的字元字串儲存在 data 屬性中。如果未插入文字（例如刪除字元時），它可能為空。

• dataTransfer − 此屬性返回一個 DataTransfer 物件，其中包含有關向可編輯內容新增或從中刪除富文字或純文字資料的資訊。

• inputType − 它指定對可編輯材料進行的更改型別，例如輸入、刪除或格式化文字。

• isComposing − 一個布林值，指示事件是在 compositionstart 之後和 compositionend 之前觸發的。這在處理具有複雜組合的語言的文字輸入時很重要。

示例

示例 - 記錄資料

讓我們透過建立一個小型 React 應用程式來使用此資訊。

我們將建立一個簡單的 React 應用，當觸發 onBeforeInput 事件時，它會記錄 InputEvent 的 data 屬性。這將使我們能夠看到事件的實際執行情況。

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>React InputEvent Function</h1>
            <input onBeforeInput={(e) => console.log("onBeforeInput", e.data)} />
         </div>
      );
   }
}

export default App;

輸出

這是一個基本的 React 應用程式。它建立一個帶有標題“React InputEvent 函式”和輸入欄位的頁面。

當我們在輸入欄位中鍵入或進行更改時，會觸發名為 onBeforeInput 的事件。此事件用於跟蹤我們在輸入區域中鍵入或更改的內容。

為了將事件資料記錄到控制檯，程式碼使用箭頭函式 (e) => console.log("onBeforeInput", e.data)。因此，當我們在輸入框中輸入時，e.data 部分將在控制檯中顯示我們正在鍵入的內容。

此程式碼允許我們檢視我們在輸入欄位中鍵入的內容，並且是使用 React 進行事件處理的簡單示例。

示例 - 字元計數器

這是一個另一個簡單的 React 應用程式，它展示了 onBeforeInput 事件的概念，用於為輸入欄位建立字元計數器。此應用程式將顯示我們在輸入欄位中鍵入的字元數 -

import React, { Component } from "react";

class App extends Component {
   constructor() {
      super();
      this.state = {
         charCount: 0
      };
   }   
   onBeforeInput = (e) => {
      const inputText = e.target.value;
      const charCount = inputText.length;
      this.setState({ charCount });
   };   
   render() {
      return (
         <div>
            <h1>Character Counter</h1>
            <input
               type="text"
               onBeforeInput={this.onBeforeInput}
               placeholder="Type something..."
            />
            <p>Character Count: {this.state.charCount}</p>
         </div>
      );
   }
}

export default App;

輸出

示例 - 過濾帖子

現在我們將建立一個簡單的應用程式來顯示將從公共 API 獲取的帖子。為了使用 React InputEvent 處理器函式，我們將新增一個輸入欄位，該欄位根據使用者在文字框中輸入的標題過濾帖子。我們將為此目的使用 onInput 事件處理器 -

import React, { useState, useEffect } from "react";

const App = () => {
   const [posts, setPosts] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");   
   useEffect(() => {
      // Simulating API call
      fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setPosts(data))
      .catch((error) => console.error("Error fetching data:", error));
   }, []);
   
   const handleInput = (e) => {
      setSearchTerm(e.target.value);
   };
   
   const filteredPosts = posts.filter((post) =>
   post.title.toLowerCase().includes(searchTerm.toLowerCase())
   );
   
   return (
      <div>
         <h1>React API Fetch App</h1>
         <input
            type="text"
            placeholder="Search by title"
            onInput={handleInput}
         />
         <ul>
            {filteredPosts.map((post) => (
            <li key={post.id}>{post.title}</li>
            ))}
         </ul>
      </div>
   );
};

export default App;

輸出

在這個應用程式中，我添加了一個輸入欄位，它使用 onInput 事件處理器更新 searchTerm 狀態。然後根據標題過濾帖子，並且只顯示匹配的帖子。

總結

因此，InputEvent 是處理可編輯資訊時 React 開發人員的有用工具。它使我們能夠輕鬆地收集和響應更改。我們回顧了 InputEvent 的重要特性，並構建了一個基本的 React 應用程式來演示其用法。該概念可以擴充套件到建立複雜的應用程式，例如富文字編輯器或互動式表單。