ReactJS - CompositionEvent 处理程序

更新于 2025/3/23 5:22:17

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) => {
      // 检查是否是 CompositionEvent
      if (e instanceof CompositionEvent) {
         // 更新状态
         setTextInput(e.data);
      }
   };   
   const handleCompositionEnd = (e) => {
      console.log("Composition End");
   };   
   const handleInput = (e) => {
      // 此事件处理常规文本输入
      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 Hooks(钩子)从 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 = () => {
      // 如果组合开始则隐藏表情符号选择器
      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(() => {
      // 从 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;