2

Buen dia, cuando doy click en agregar se va agregando un campo nuevo un input y si doy eliminar el campo nuevo se elimina.

Puedo tener muchos campos input y todo funciona, ahora necesito que al colocarle un numero dentro del input se vayan sumando los valores y me arroje en un campo aparte la suma total y lo mismo si quito un campo, que me vaya restando.

Lo he intentado pero no he logrado que estos campos que se agregan de forma dinámica sumen los valores que se les vaya colocando y que al eliminar algún campo pues vaya restando.

import React,{ useState} from 'react';

const defaultState = {
  numero: "",
  
};

function Row({ onChange, onRemove, numero,}) {
  return (
    <div>
      <input
      type="number"
        value={numero}
        onChange={e => onChange("numero", e.target.value)}
       
      />
      
     
      <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 >
      {rows.map((row, index) => (
        <Row
          {...row}
          onChange={(name, value) => handleOnChange(index, name, value)}
          onRemove={() => handleOnRemove(index)}
          key={index}
        />
      ))}
      <button onClick={handleOnAdd}>Agregar</button>

      <input type="text" placeholder="suma total" />
    </div>
  );
}

1 respuesta 1

2

Para lograr eso habría que agregarle un par de cosas a tu código.

Te propongo esta manera de hacerlo:

Primero creamos un nuevo estado llamado amount y lo inicializamos en 0.

 const [amount, setAmount] = useState(0);

El segundo paso será modificar la función handleOnAdd() para que sume el contenido de todos los elementos del estado rows mediante un .map. Guardamos ese resultado en el objeto total y luego en el estado amount.

const handleOnAdd = () => {
    let total = 0
    rows.map(function(num) {
      total = total + parseInt(num.numero)
    });
    console.log(total)
    setAmount(total)
    setRows(rows.concat(defaultState));
  };

El próximo paso será modificar la función handleOnRemove().

Haremos que actualice el estado amount con el resultado de la resta de su contenido con el valor del input que estamos eliminando.

const handleOnRemove = index => {
    setAmount(amount - parseInt(rows[index].numero))
    const copyRows = [...rows];
    copyRows.splice(index, 1);
    setRows(copyRows);
  }; 

Por último transformamos el input en type="number", para asegurarnos de que solo se ingresen números, y le ponemos a su value el contenido del estado amount.

<input type="number" placeholder="suma total" value={amount} />

Con esos cambios, todo el código quedaría así:

import React, { useState } from "react";

const defaultState = {
  numero: ""
};

function Row({ onChange, onRemove, numero }) {
  return (
    <div>
      <input
        type="number"
        value={numero}
        onChange={(e) => onChange("numero", e.target.value)}
      />

      <button onClick={onRemove}>Eliminar</button>
    </div>
  );
}

export default function Pruebas() {
  const [rows, setRows] = useState([defaultState]);
  const [amount, setAmount] = useState(0);

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

  const handleOnAdd = () => {
    let total = 0;
    rows.map(function (num) {
      total = total + parseInt(num.numero);
    });
    console.log(total);
    setAmount(total);
    setRows(rows.concat(defaultState));
  };

  const handleOnRemove = (index) => {
    setAmount(amount - parseInt(rows[index].numero));
    const copyRows = [...rows];
    copyRows.splice(index, 1);
    setRows(copyRows);
  };
  console.log(amount);
  return (
    <div>
      {rows.map((row, index) => (
        <Row
          {...row}
          onChange={(name, value) => handleOnChange(index, name, value)}
          onRemove={() => handleOnRemove(index)}
          key={index}
        />
      ))}
      <button onClick={handleOnAdd}>Agregar</button>

      <input type="number" placeholder="suma total" value={amount} />
    </div>
  );
}

Edit new

Ejecuta el código y revisa si cumple con lo que buscabas.

5
  • Si bien tu código funciona, la suma la realiza cuando se clickea algún botón. Y si elimino un input, la suma desaparece. Que te parece controlar la operación mediante useEffect? Así sería más óptimo :D Commented el 24 ago. 2021 a las 20:22
  • @Paulo Urbano Rivera podría ser. Siéntete libre de hacer un fork de mi SandBox y mejorar mi respuesta. Commented el 24 ago. 2021 a las 20:25
  • funciona bien la solucion que agregaste pero hay un detalle cuando agrego un campo no suma toca agregar otro campo nuevo para que el anterior sume y lo mismo con la resta...
    – Giovanny
    Commented el 24 ago. 2021 a las 20:26
  • 1
    @Giovanny, En este momento la respuesta es correcta y va acorde al requerimiento de la pregunta original. El detalle que mencionas "cuando agrego un campo no suma toca agregar otro campo nuevo para que el anterior sume y lo mismo con la resta"no esta especificado en la pregunta original, te sugiero editar la pregunta original y agregar dicho detalle. Saludos
    – g.4
    Commented el 25 ago. 2021 a las 1:15
  • muchas gracias funciono sin problemas.
    – Giovanny
    Commented el 25 ago. 2021 a las 12:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.