一定长度后动态突出显示字符？

Question

我有以下使用 useState 钩子的基本 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;

这是结果，没有任何样式：

我现在的问题是，如果输入字符数大于 30，我想突出显示字符。当用户键入时，如果输入文本超过 30 个字符，则将突出显示下一个字符。如果count 变为 31，则该额外的一个字符应突出显示为红色（或其他颜色）。

我不知道如何使用 textarea（以及使用 React）来实现这一点。

用户将如何做到这一点？

Answer 1

嗯，这是我在 10 分钟内完成的事情，但它确实有效，您可以解决剩下的问题。

还有codeSandBox link

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;