React useState状态数组更新及受控input无法输入问题

问题1：绑定value属性后输入框无法输入 #

根因 #

id为5的输入框被设置为受控组件，但绑定的value是普通局部变量letter：

• 组件每次渲染时，代码顶部的let letter = ''都会重新执行，将letter重置为空字符串
• 事件回调中直接修改普通变量letter不会触发组件重渲染，视图不会同步更新
• 最终表现为输入框始终显示空值，输入操作被阻断

核心规则：React受控组件的value必须绑定到useState声明的响应式状态，只有修改状态才能驱动视图更新，禁止用普通局部变量绑定受控组件的value

问题2：多输入框同类逻辑简化 #

完全可以通过数组统一管理状态，消除重复代码，同时实现「输入内容仅保留最后1个字符」的需求，实现代码如下：

import React, { useState } from 'react'

function MainBoard() {
  // 用数组统一管理5个输入框的值，初始全为空串，索引0对应id=1，索引4对应id=5
  const [inputValues, setInputValues] = useState(Array(5).fill(''))
  // 统一的输入处理函数，传入当前输入框对应的数组索引即可
  const handleInputChange = (index, event) => {
    const fullValue = event.target.value
    setInputValues(prev => {
      const newValues = [...prev]
      // 只取输入内容的最后一位存入状态
      newValues[index] = fullValue.slice(-1)
      return newValues
    })
  }

  return (
    <div>
      {/* 倒序遍历数组，按id从5到1的顺序渲染输入框 */}
      {[4, 3, 2, 1, 0].map(index => {
        const inputId = index + 1
        const classMap = ['one', 'two', 'three', 'four', 'five']
        return (
          <input
            key={inputId}
            id={String(inputId)}
            className={`game-area-${classMap[index]}`}
            type='text'
            value={inputValues[index]}
            onChange={(e) => handleInputChange(index, e)}
          />
        )
      })}
    </div>
  )
}

export default MainBoard

实现注意事项 #

• 不要给输入框设置maxLength="1"，否则浏览器会直接截断超过1位的输入，无法拿到完整内容截取最后一位
• 更新数组类型的状态时，必须先浅拷贝原数组再修改，禁止直接修改原state
• 遍历生成的列表元素必须设置唯一的key属性，避免React渲染diff异常
• 如果后续需要新增输入框，只需要调整初始化状态的数组长度和class映射即可，无需重复编写JSX和事件逻辑

内容的提问来源于stack exchange，提问作者AoXNeR