如何使用 React.js 根据用户输入突出显示文本？

以下方法介绍了如何突出显示用户在 ReactJS 中输入的文本。这是一个可以添加到任何 ReactJS 网站的简单效果。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useState() React hooks的知识。
• onChange()事件的知识。

基本设置：您将使用create-react-app启动一个新项目，因此打开终端并输入：

npx create-react-app react-highlight-text

现在通过在终端中输入给定的命令转到您的react-highlight-text文件夹：

cd react-highlight-text

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项：

npm install --save styled-components

现在转到src文件夹并创建一个文件AppStyles.js 。

项目结构：项目中的文件结构将如下所示：

示例：我们创建一个状态，第一个元素输入作为初始状态，其值为空字符串，第二个元素作为函数setInput()用于更新状态。然后创建一个名为toggleInput的函数，它将状态的值设置为我们在输入字段中输入的值。

我们将输入字段设置为受控组件，以便它相应地更新状态。当我们在Input 字段中输入一个值时，toggleInput函数会通过onChange 事件触发，该事件将状态设置为输入的值。我们还在InputHighlighter元素中使用输入字段下方的状态值，该元素具有顶部边框（覆盖输入字段的底部边框）。这样，我们使用 React 状态来更新两者的值 输入字段和 InputHighlighter。因此，当我们在输入字段中输入一个值时，该值也会在 InputHighlighter 中更新。这就是为什么在我们输入文本时后者的边界线不断增加，但我们看不到它，因为我们已将 InputHighlighter 的 CSS 溢出属性设置为 none。

这使网页用户认为输入字段实际上是在突出显示他们正在输入的文本。但实际上，情况并非如此。他们只是将另一个元素的顶部边框视为输入荧光笔。

App.js

import React,{useState} from 'react';
import {
  InputContainer, 
  Input, 
  InputHighlighter, 
  Heading
} from './AppStyles';
  
const App = () => {
  const [input, setInput] = useState('');
  
  const toggleInput = (e) => {
    setInput(e.target.value);
  }
    return (
      
      GeeksforGeeks
      
      
        {input}
      
    
    );
}
  
export default App;

AppStyles.js

import styled from 'styled-components';
  
export const InputContainer = styled.div`
   width: 600px;
   margin: 40px auto;
   position: relative;
`
export const Heading = styled.h1`
   text-align: center;
   color: green;
`;
  
export const Input = styled.input`
   height: 70px;
   width: 100%;
   padding: 0;
   font-size: 35px;
   border: none;
   outline: none;
   border-bottom: 4px solid rgba(192, 192, 192);
`
  
export const InputHighlighter = styled.span`
   font-size: 35px;
   border-top: 4px solid green;
   position: absolute;
   left: 0;
   bottom: 0;
   height: 0;
   overflow: hidden;
`;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。看看当我们输入文本时边界线是如何增加的，而当我们一个一个地删除字符时边界线是如何开始减少的。