时间戳

首页 > 解决方案 > react js中突出显示文本的textarea组件

javascript - react js中突出显示文本的textarea组件

问题描述

我正在寻找一些好的实践示例来更改反应 js 中文本区域中的文本颜色

我看到了一些在 textarea 顶部添加 div 的示例，但是如何以反应的方式做到这一点

标签： javascriptreactjs

解决方案

要更改文本的颜色，我们需要添加 html 和 css。我们不能在 textarea 中添加它，因为 textarea 只包含文本，而不包含 html 元素。

因此，对于您的用例，您要做的是使用带有 contenteditable 的 div 而不是 textarea 来输入文本。像这样

<div contentEditable></div>

现在以反应方式做。我们需要存储将在 div 中呈现的状态。在某些操作（例如选择文本）时，您可以使用文本颜色样式插入包裹在 ap 标签周围的文本。

假设，让我们假设这条线，This is a sentence for demo。当用户选择 on 时sentence，我们可以用 p 包裹文本并像这样更新状态 - This is a <p style={{ color: 'red' }}>sentence</p> for demo。

const [state, setState] = useState('');

render (
  <div contentEditable>{state}</div>
);

推荐阅读