React类型测试仪仅接收一个输入然后停止

Question

因此，我不确定为什么我的代码不会进入后续的键盘，它需要第一个“ L”，然后停止：

老实说，我不知道问题是什么。 Lorem是我变成数组的长字符串，如果“ E.Key” === Array在0处，请删除该项目并更新位置。

我不知道为什么每个键盘都没有完成。

import { useState } from "react"

const Input = ({text}) => {
    const [lorem,changeString] = useState(text.split(''))
    const [input,changeInput] = useState('')
    const [position,changePosition] = useState(0)
    const [color,changeColor] = useState(false)

    const keyDown = (e) => {
        changeInput(e.key)
        compareCharacters(input)
    }

    const compareCharacters = (input) => {
        if (input === lorem[position]) {
            changeString(lorem.splice(0,1))
            changePosition(position+1)
        } else {
            changeColor(true)
        }
    }


  return (
    <input className={`text ${color ? 'new' : ''}`}
    type="text" 
    size="10000"
    onKeyDown={keyDown}
    >
    </input>
  )
}

export default Input

Answer 1

import { useState } from 'react'

const Input = ({ text }) => {
  const [lorem, changeString] = useState(text.split(''))
  const [position, changePosition] = useState(0)
  const [color, changeColor] = useState(false)

  const keyDown = (e) => {
    if (e.key !== lorem[position]) {
      changeColor(true)
      return
    }
    changeString(lorem.slice(1))
    changePosition(position + 1)
  }



  return (
    <input
      className={`text ${color ? 'new' : ''}`}
      type="text"
      size={10000}
      onKeyDown={keyDown}
    ></input>
  )
}

export default Input