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

打印页面