Reactjs动态生成输入框时各输入框值逐次减1直至1的实现问题

核心修改点 #

• 提取初始值为公共常量，支持自定义调整
• 重写新增行逻辑：每次新增前先校验当前数值是否已到最低值1，未到则将所有现有输入框数值减1，再追加同等数值的新输入框
• 避免对象引用复用问题，每次操作都生成全新的行对象

完整可运行代码 #

import { useState } from "react";

// 初始数值，可按需修改
const INITIAL_VALUE = 4;
// 最低可减到的数值
const MIN_VALUE = 1;

function Row({ onChange, onRemove, nombre }) {
  return (
    <div>
      <input
        value={nombre}
        onChange={e => onChange("nombre", e.target.value)}
        placeholder="Decrementar"
      />
      <button onClick={onRemove}>删除</button>
    </div>
  );
}

export default function Pruebas() {
  // 初始行的数值为上面定义的初始值
  const [rows, setRows] = useState([{ nombre: INITIAL_VALUE }]);
  
  const handleOnChange = (index, name, value) => {
    const copyRows = [...rows];
    copyRows[index] = {
      ...copyRows[index],
      [name]: value
    };
    setRows(copyRows);
  };

  const handleOnAdd = () => {
    // 先判断当前数值已经到最低值，就不继续新增
    if (rows[0].nombre <= MIN_VALUE) return;
    // 所有现有行数值减1
    const updatedRows = rows.map(row => ({
      ...row,
      nombre: row.nombre - 1
    }));
    // 追加新的行，数值和减后的值一致
    updatedRows.push({ nombre: updatedRows[0].nombre });
    setRows(updatedRows);
  };

  const handleOnRemove = index => {
    const copyRows = [...rows];
    copyRows.splice(index, 1);
    // 如果需要删除行时所有数值回升，可以放开下面注释
    // const increasedRows = copyRows.map(row => ({
    //   ...row,
    //   nombre: Math.min(row.nombre + 1, INITIAL_VALUE)
    // }));
    // setRows(increasedRows);
    
    // 不需要回升就用下面这句
    setRows(copyRows);
  };

  return (
    <div className="App">
      {rows.map((row, index) => (
        <Row
          {...row}
          onChange={(name, value) => handleOnChange(index, name, value)}
          onRemove={() => handleOnRemove(index)}
          key={index}
        />
      ))}
      <button onClick={handleOnAdd}>新增输入框</button>
    </div>
  );
}

可选功能说明 #

如果需要实现删除输入框时，所有剩余输入框数值加1（最多回到初始值），可以把handleOnRemove里的注释代码放开，替换原有赋值逻辑即可。

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