在反应 js 中突出显示文本的 textarea 组件

Question

I am looking for some good practice example to change color of text in a textarea in react js

i saw some example with adding div on top of textarea but how to do that in a react way

Answer 1

To change the color of the text, we need to add html and css. We can't add that in textarea as textarea only contains text, but not html elements.

So, for your usecase, what you gonna do is use a div with contenteditable instead of textarea to enter the text. Like this

<div contentEditable></div>

Now to do in react way. We need to store the state which will be rendered in div. And upon some action like selection of the text, you can insert the text wrapped around ap tag with style of text color.

For suppose, lets assume this line, This is a sentence for demo . When user selects on sentence , we can wrap the text with p and update the state like this - This is a <p style={{ color: 'red' }}>sentence</p> for demo .

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

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