React数组渲染多输入框的默认值设置及无useState实现方案咨询

方案1：不使用useState实现（更推荐，代码更简洁） #

你当前的需求仅需要在点击提交按钮时获取输入值，不需要实时同步状态到组件逻辑层，完全可以用非受控组件实现，不需要额外声明状态：

// 删掉原来的valueInput相关useState声明
{array.map((x) => (
  <TableRow key={x.id}>
    <TableCell>{x.maxNumber}</TableCell>
    <TableCell>
      <input
        type="number"
        min="0"
        max={x.maxNumber}
        defaultValue={x.maxNumber} // 直接设置默认值为当前行的maxNumber
      />
      <IconButton
        onClick={(e) => {
          // 直接从当前按钮的父容器获取对应input的值
          const inputDom = e.currentTarget.parentElement.querySelector('input[type="number"]')
          const inputVal = parseInt(inputDom.value, 10)
          // 非法值兜底校验
          const finalVal = Math.max(0, Math.min(x.maxNumber, isNaN(inputVal) ? 0 : inputVal))
          team.setTeamNumber(x.id, finalVal)
        }}
      >
        <Check />
      </IconButton>
    </TableCell>
  </TableRow>
))}

方案2：受控组件实现（需要用useState） #

你之前的代码问题在于用单个valueInput状态管理所有行的输入，会导致所有输入框值联动。如果需要用受控组件，需要声明对象类型的状态存储每一行的输入值：

// 初始化状态，默认值为每行对应maxNumber
const [inputValues, setInputValues] = React.useState(() => {
  return array.reduce((res, item) => {
    res[item.id] = item.maxNumber
    return res
  }, {})
})

{array.map((x) => (
  <TableRow key={x.id}>
    <TableCell>{x.maxNumber}</TableCell>
    <TableCell>
      <input
        type="number"
        min="0"
        max={x.maxNumber}
        value={inputValues[x.id]}
        onChange={(e) => {
          const val = parseInt(e.target.value, 10)
          // 输入范围校验
          if (!isNaN(val) && val >= 0 && val <= x.maxNumber) {
            setInputValues(prev => ({
              ...prev,
              [x.id]: val
            }))
          }
        }}
      />
      <IconButton
        onClick={() => {
          team.setTeamNumber(x.id, inputValues[x.id])
        }}
      >
        <Check />
      </IconButton>
    </TableCell>
  </TableRow>
))}

原有代码问题说明 #

• 单个全局状态无法对应多行独立输入，会出现修改一行所有行同步变更的问题
• 原onChange回调中的parseInt(event.target.value,valueInput)用法错误，parseInt第二个参数为数字进制，应传固定值10

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