ReactJS - CompositionEvent 處理程式

CompositionEvent 是一個 Web 開發概念，主要指使用者在網頁上輸入和提交文字。它主要涉及使用者間接輸入文字時發生的事件。基本上，可以將其理解為使用者在鍵盤上打字時發生的事件，但特別關注可能需要更復雜處理的語言和輸入法。

因此，我們可以說 CompositionEvent 是一種在使用者在網頁上輸入內容時觸發的事件型別。它處理可能帶有重音或其他複雜字元的語言。它就像一個幕後事件，幫助 Web 開發人員有效地管理文字輸入過程。

語法

<input
   onCompositionStart={e => console.log('run on Composition Start')}
   onCompositionUpdate={e => console.log('run on Composition Update')}
   onCompositionEnd={e => console.log('run on Composition End')}
/>

引數

CompositionEvent 介面中的 data 屬性是一個特殊的訊息，根據其使用時間提供不同的資訊 -

e - 它是一個簡單的 React 事件物件。
compositionStart - 對於“compositionStart”事件，它告訴我們我們在開始輸入新內容之前選擇的文字。即使我們修改了選擇，此訊息仍然會告知我們開始時選擇了什麼。
compositionStart - 對於“compositionUpdate”事件，它告訴我們我們在輸入時的文字。當我們調整文字時，它會發生變化。
compositionEnd - “compositionend”事件顯示已新增到文件或“提交”到編輯器中的文字。這是我們完成書寫並確認文字後保留的內容。

它有什麼用？

CompositionEvents 對 Web 開發人員很有用，因為它們提供了有關文字輸入過程的資訊，這在處理複雜字元或其他輸入方法時尤其有用。它使開發人員能夠建立更靈活、更使用者友好的文字輸入體驗。

示例

示例 - 特殊字元應用程式

讓我們看看如何在 React JS 應用程式中使用 CompositionEvent 的基本示例。假設我們要管理特殊字元的輸入。

import React, { useState } from "react";

function App() {
   const [textInput, setTextInput] = useState("");   
   const handleCompositionStart = (e) => {
      console.log("Composition Start");
   };   
   const handleCompositionUpdate = (e) => {
      // Check if it is a CompositionEvent
      if (e instanceof CompositionEvent) {
         // Update the state
         setTextInput(e.data);
      }
   };   
   const handleCompositionEnd = (e) => {
      console.log("Composition End");
   };   
   const handleInput = (e) => {
      // This event handles regular text input
      setTextInput(e.target.value);
   };   
   return (
      <div>
         <input
            type="text"
            onCompositionStart={handleCompositionStart}
            onCompositionUpdate={handleCompositionUpdate}
            onCompositionEnd={handleCompositionEnd}
            onInput={handleInput}
         />
         <p>Text Input: {textInput}</p>
      </div>
   );
}

export default App;

輸出

在上面的程式碼中，當用戶開始建立文字時會呼叫 handleCompositionStart 方法，當用戶停止編寫文字時會呼叫 handleCompositionEnd 函式，當用戶更新文字時會呼叫 handleCompositionUpdate 方法。

這些函式分別與 onCompositionStart、onCompositionUpdate 和 onCompositionEnd 事件關聯。

示例 - 表情符號選擇器應用程式

此應用程式將是一個帶有表情符號選擇器的輸入欄位，該選擇器使用組合事件來允許使用者輕鬆輸入表情符號。此程式碼定義了一個 EmojiPicker 元件，該元件獲取表情符號資料。它使用 useEffect hook 從 API（例如 GitHub 表情符號 API）獲取表情符號資料或載入靜態列表。此應用程式的程式碼如下所示 -

App.js

import React, { useState } from 'react';
import EmojiPicker from './EmojiPicker';

function App() {
   const [text, setText] = useState('');
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);   
   const handleChange = (event) => {
      setText(event.target.value);
   };   
   const handleEmojiPick = (emoji) => {
      setText(text + emoji);
      setShowEmojiPicker(false);
   };   
   const handleCompositionStart = () => {
      // Hide emoji picker if composition starts
      setShowEmojiPicker(false);
   };   
   const toggleEmojiPicker = () => {
      setShowEmojiPicker(!showEmojiPicker);
   };   
   return (
      <div>
         <input
            value={text}
            onChange={handleChange}
            onCompositionStart={handleCompositionStart}
         />
         <button onClick={toggleEmojiPicker}>Toggle Emoji Picker</button>
         {showEmojiPicker && <EmojiPicker onEmojiPick={handleEmojiPick} />}
      </div>
   );
}

export default App;

EmojiPicker.js

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

const EmojiPicker = ({ onEmojiPick }) => {
   const [emojiList, setEmojiList] = useState([]);   
   useEffect(() => {
      // Fetch emoji data from an API 
      fetch('https://api.github.com/emojis')
      .then((response) => response.json())
      .then((data) => setEmojiList(Object.keys(data)));
   }, []);   
   const handleEmojiClick = (emoji) => {
      onEmojiPick(emoji);
   };   
   return (
      <div className="emoji-picker">
      {emojiList.map((emoji) => (
         <button key={emoji} onClick={() => handleEmojiClick(emoji)}>
            {emoji}
         </button>
      ))}
      </div>
   );
};

export default EmojiPicker;

輸出

該應用程式遍歷 emojiList 並將每個表情符號呈現為按鈕。點選表情符號會呼叫 handleEmojiClick 函式，該函式透過 onEmojiPick prop 將所選表情符號傳遞迴父元件。

示例 - 統計單詞應用程式

此應用程式演示了一種簡單的方法，可以使用組合事件即時統計單詞。在此應用程式中，使用者可以在文字框中輸入內容。當用戶撰寫文字時，會觸發 onCompositionUpdate 事件。該應用程式計算組合文字中的單詞數並顯示計數。

import React, { useState } from 'react';

function App() {
   const [currentText, setCurrentText] = useState('');
   const [wordCount, setWordCount] = useState(0);   
   const handleChange = (event) => {
      setCurrentText(event.target.value);
   };   
   const handleCompositionStart = () => {
      console.log('Composition Start');
   };   
   const handleCompositionUpdate = (event) => {
      if (event instanceof CompositionEvent) {
         setCurrentText(event.target.value);
      }
   };
   const handleCompositionEnd = () => {
      const words = currentText.split(/\s+/);
      setWordCount(words.filter((word) => word !== '').length);
      console.log('Composition End');
   };   
   return (
      <div>
         <h2>Word Counter</h2>
         <textarea
            value={currentText}
            onChange={handleChange}
            onCompositionStart={handleCompositionStart}
            onCompositionUpdate={handleCompositionUpdate}
            onCompositionEnd={handleCompositionEnd}
         />
         <p>Words: {wordCount}</p>
      </div>
   );
}

export default App;

輸出

這是一個基本示例，但它展示了組合事件在建立互動式和響應式應用程式方面的潛力。

總結

CompositionEvent 是一個重要的 Web 開發概念，與使用者在網頁上的文字輸入相關，尤其是在處理需要複雜處理的語言和輸入方法時，例如帶有重音或特殊字元的語言。它在打字過程中觸發，並幫助 Web 開發人員有效地管理文字輸入。

reactjs_reference_api.htm

列印頁面