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

在 React.js 中，我们可以利用状态（state）和属性（props）的概念来管理动态数据并重新渲染组件。在本文中，我们将使用这些概念来实现一个输入框，让用户输入文本后，根据文本中包含的关键词进行高亮显示。

实现思路

我们可以使用以下步骤来完成本次实现：

1. 创建一个 input 组件，用于让用户输入文本。
2. 将 input 组件中输入的文本保存到组件的状态中。
3. 在组件中使用正则表达式来匹配需要高亮的关键词。
4. 根据正则表达式匹配结果，生成新的文本。
5. 将新的文本渲染到页面上。

代码实现

1. 创建组件

首先，我们需要创建一个 input 组件，让用户输入文本。我们使用 useState 钩子来初始化状态：

import { useState } from 'react';

function InputBox() {
  const [text, setText] = useState('');

  const handleInput = (event) => {
    setText(event.target.value);
  }

  return (
    <input type="text" onChange={handleInput} value={text} />
  );
}

export default InputBox;

2. 保存用户输入的文本到状态中

当用户输入文本时，我们需要将其保存到组件的状态中，以便后续使用。我们使用 useState 钩子来初始化状态，并使用 onChange 事件来监听输入框的变化：

const [text, setText] = useState('');

const handleInput = (event) => {
  setText(event.target.value);
}

return (
  <input type="text" onChange={handleInput} value={text} />
);

3. 使用正则表达式匹配需要高亮的关键词

接下来，我们需要使用正则表达式来匹配需要高亮的关键词。在本例中，我们假设用户输入的关键词以逗号分隔，如下所示：

React, JavaScript, CSS

我们可以使用以下正则表达式来匹配输入的文本中包含的关键词：

const regex = new RegExp(`(${keywords.join('|')})`, 'gi');

const highlightedText = text.replace(regex, '<span class="highlighted">$1</span>');

其中，keywords 是一个数组，包含用户输入的关键词，使用 join 方法将其转换为一个以 | 分隔的字符串。highlightedText 是经过正则表达式匹配后生成的新文本，在匹配成功的关键词前后添加了 <span> 标签用于高亮显示。

4. 将新的文本渲染到页面上

最后，我们需要将生成的新文本渲染到页面上。我们可以使用 dangerouslySetInnerHTML 属性来设置元素的 HTML 内容：

return (
  <div dangerouslySetInnerHTML={{__html: highlightedText}} />
);

完整代码

下面是完整的代码：

import { useState } from 'react';

function InputBox() {
  const [text, setText] = useState('');

  const handleInput = (event) => {
    setText(event.target.value);
  }

  const keywords = text.split(',').map((keyword) => {
    return keyword.trim();
  }).filter((keyword) => {
    return keyword !== '';
  });

  const regex = new RegExp(`(${keywords.join('|')})`, 'gi');

  const highlightedText = text.replace(regex, '<span class="highlighted">$1</span>');

  return (
    <div dangerouslySetInnerHTML={{__html: highlightedText}} />
  );
}

export default InputBox;

总结

在本文中，我们介绍了如何使用 React.js 根据用户输入高亮显示文本。我们使用了组件状态和正则表达式来管理动态数据和匹配关键词，并使用 dangerouslySetInnerHTML 属性将新文本渲染到页面上。这个例子展示了 React.js 的一些基本概念和用法，希望对你有所帮助。