在javascript中具有突出显示文本的textarea组件

Question

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

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

Answer 1

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

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

<div contentEditable></div>

现在以反应方式进行。我们需要存储将在div中呈现的状态。然后，通过选择文本等操作，您可以插入带有p标记的文本，并带有文本颜色。

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

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

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