Reactjs 动态突出显示特定长度后的字符？

我有以下使用

useState

hook的基本React应用程序，它创建一个文本框并统计用户输入的字符数：

import React, { useState } from 'react';

function App(){

  const [count, setCount] = useState(0); 


  return (
    <div>
      <textarea 
        placeholder="What's happening?" 
        onChange={e => setCount(e.target.value.length)}
      />
      <p>You typed {count} characters</p>
    </div>
  )

}

export default App;

import React，{useState}来自“React”；
函数App（）{
const[count，setCount]=useState（0）；
返回(
setCount（e.target.value.length）}
/>
您键入了{count}个字符

)
}
导出默认应用程序；

以下是不带任何样式的结果：

我现在的问题是，如果输入字符数大于30，我想突出显示字符。当用户键入时，如果输入文本超过30个字符，则将突出显示下一个字符。如果

count

变为31，则该额外字符应高亮显示为红色（或其他颜色）

我不知道如何用textarea（和React）实现这一点

---

用户是如何做到这一点的呢？

好吧，这是我在10分钟内做的事情，但它是有效的，剩下的你可以解决

也

import React，{useState，useRef}来自“React”；
常量应用=（）=>{
const[charLength，setCharLength]=useState（0）；
常量[inputText，setInputText]=useState（“”）；
const inputEl=useRef（null）；
常量maxLength=（）=>{
inputEl.current.value=“对于类似的东西”；
输入电流设置选择范围（10999）；
inputEl.current.focus（）；
};
返回(
字符长度：{charLength}
最大长度：10
setCharLength（e.target.value.length）}
/>
maxLength（）}>聚焦输入
);
};
导出默认应用程序；

让我在这里尝试一下。希望帮助我认为这是一个开始，因为在“for someth”之后，文本会突出显示。当然，我希望在用户动态地在文本框中键入输入时突出显示。我会继续玩的，谢谢！你可以在输入上使用onChange函数，我可以在今晚晚些时候继续，并修复这个问题，在输入15个字符后，即使你继续输入，它也会用红色突出显示。

import React, { useState, useRef } from "react";

const App = () => {
  const [charLength, setCharLength] = useState(0);
  const [inputText, setInputText] = useState("");
  const inputEl = useRef(null);

  const maxLength = () => {
    inputEl.current.value = "for something like something something something";
    inputEl.current.setSelectionRange(10, 999);
    inputEl.current.focus();
  };
  return (
    <div className="App">
      <h1>char length: {charLength}</h1>
      <h2>max length: 10</h2>
      <input
        ref={inputEl}
        type="text"
        onChange={(e) => setCharLength(e.target.value.length)}
      />
      <button onClick={() => maxLength()}>Focus the input</button>
    </div>
  );
};

export default App;