时间戳

首页 > 解决方案 > 减少输入值 - reactjs

reactjs - 减少输入值 - reactjs

问题描述

我有一个输入，其值为 4 或者它可以是任何一个，当我按下按钮时，它正在生成另一个动态输入，我需要的是每次生成动态输入时，每个输入的值都减去 -1，直到它在 1 中。

我无法根据需要使其工作，如果有人可以帮助我，我将非常感激，我已经查看了几个示例，但我无法使其工作，欢迎任何帮助。

import { useState } from "react";

const defaultState = {
  nombre: 4
  
};

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


export default function Pruebas() {

  const [rows, setRows] = useState([defaultState]);
  
  const handleOnChange = (index, name, value) => {
    const copyRows = [...rows];
    copyRows[index] = {
      ...copyRows[index],
      [name]: value
    };
    setRows(copyRows);
  };

  const handleOnAdd = () => {
    setRows(rows.concat(defaultState));
    
  };

  const handleOnRemove = index => {
    const copyRows = [...rows];
    copyRows.splice(index, 1);
    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>
  );
}

标签： reactjsreact-reduxreact-hooks

解决方案

当您连接新行时，请确保减少字段nombre的值，请参阅完整示例：https ://codesandbox.io/s/stack-over-inc-3nixd

推荐阅读