当用户键入时，如何更改输入字段的背景颜色？

Question

我正在创建一个刽子手类型的应用程序，如果用户键入正确的字母，我想更改每个输入字段的背景颜色，否则我希望背景更改为绿色和红色。 我有所以当用户输入 1 个字母时，cursor 会移动到下一个输入字段，用户可以继续输入直到最后，如果他们猜到了句子，则会出现一个按钮并出现一个新句子，直到达到 10 分和将出现一个新屏幕，告诉用户他们赢了。

function App() {
  const [sentence, setSentence] = useState('');
  const [score, setScore] = useState(0); 
  const [pageNumber, setPageNumber] = useState(1);
  const [userInput, setUserInput] = useState('');
  const [letters, setLetters] = useState([]);
  const inputs = useRef([]);
  const words = useRef([]);

  const handleChange = (event, index) =>{
    // Check if the current input is not the last
    if (index +1 !== inputs.current.length) {
        let input = inputs.current[index+1];
        // Focus the next input
        input.focus();
    }
    words.current.push(inputs.current[index].value);
    console.log(sentence, words.current.join(''));
    // Adding the new character to current input
    setUserInput(userInput + event.currentTarget.value);
  }

  const handleClick = () => {
    setScore(score + 1);
    setPageNumber(pageNumber + 1);
    words.current = [];
    inputs.current.forEach(input =>{
      input.value = "";
    })
  }

  return (
    <div className="main">
      <Container className="App">
        {score < 10 ?(
          <div>
            <ScrambleSentence sentence={sentence}/>
            <div className="text">
              Guess the sentence! Start typing
            </div>
            <div className="text">
              The yellow blocks are meant for spaces
            </div>
            <div className="score">
              Score: {score}
            </div>
            {/* {words.map((word, i) =>{
              count += 1;
              return <InputGrid sentence={word} key={i}/>;
            })} */}
            <div>
            {letters.map((letter, index) =>{
                // If the letter is a space break to next line
                if(letter === ' '){
                    return (<>
                        <input 
                            className="grid"
                            maxLength="1"
                            style={{backgroundColor: '#ffb74d'}}
                            key={index}
                            onChange={(event) => handleChange(event, index)}
                            ref={el => inputs.current[index] = el}
                        />
                        <br/>
                    </>);
                }else{
                    return(
                      <input 
                        className="grid"
                        maxLength="1"
                        key={index}
                        onChange={(event) => handleChange(event, index)}
                        ref={el => inputs.current[index] = el}
                      />  
                    );
                }
            })}

            {words.current.join('').toLowerCase() === sentence.toLowerCase() 
            ? (<div>
                    <br/>
                    <button className="next" onClick={handleClick}>
                        Next
                    </button>
                </div>) 
            : null
            }
        </div>
          </div>
        ): (
          <div>
            You win
          </div>
        )}
        
      </Container>
    </div>
  );
}
export default App;