2

Tengo un input y al colocar un numero x me esta generando select dinamicos de forma descendiente, y necesito crear un input nuevo donde se vayan sumando de forma dinamica el valor que vaya seleccionando de cada select dinamico, lo he intentado pero no he podido lograrlo, no he podido capturar los valores de lo select y he intendo varias formas y no he podido, si alguien me puede ayudar se lo agradecería, lo unico que necesito es que haya un nuevo input donde vaya apareciendo la suma de los valores que voy seleccionado de cada select dinamico que se vaya creando.

https://codesandbox.io/s/green-silence-p91q1?file=/src/App.js

import React, { useState } from "react";
let initialState = {
  first: null,
  arraySelect: []
};
const Test = () => {
  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
  const [numberIni, setnumberIni] = useState(initialState.first);
  const [selectedNumbers, setSelectedNumbers] = useState([]);

  const getArray = (value) => {
    const numValue = parseInt(value, 10);
    const arr = [];
    for (let i = 0; i < numValue - 1; i++) {
      arr.push(numValue - i - 1);
    }
    if (arr.length) {
      return arr;
    }
  };
  const setSelect = (value) => {
    let isArray = getArray(value);
    if (isArray) {
      setarraySelect([...arraySelect, isArray]);
    }
  };

  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setnumberIni(event.target.numberIni.value - 1);
  };

  const resetForm = () => {
    setnumberIni(null);
    setarraySelect([]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="numberIni" type="number" />

        <input type="submit" value="Generar select" />
      </form>
      {numberIni && (
        <div>
          <select
            onChange={(e) => handleChange(0, e.target.value)}
            name=""
            id=""
          >
            <option value="seleccione">Seleccione</option>
            {Array(parseInt(numberIni))
              .fill(1)
              .map((value, key) => {
                return (
                  <option value={numberIni - key}>{numberIni - key}</option>
                );
              })}
          </select>
          <button
            type="submit"
            className="btn btn-success"
            onClick={() => {
              setSelect(selectedNumbers[0]);
            }}
          >
            crear
          </button>
          {Array(parseInt(numberIni))
            .fill(1)
            .map((value, key2) => {
              return (
                <div>
                  {arraySelect[key2] && (
                    <>
                      <select
                        onChange={(e) => handleChange(key2 + 1, e.target.value)}
                        name=""
                        id=""
                      >
                        <option value="seleccione">Seleccione</option>
                        {arraySelect[key2].map((value, key3) => {
                          return (
                            <option value={arraySelect[key2][key3]}>
                              {arraySelect[key2][key3]}
                            </option>
                          );
                        })}
                      </select>
                      <button
                        type="submit"
                        className="btn btn-success"
                        onClick={() => {
                          setSelect(selectedNumbers[key2 + 1]);
                        }}
                      >
                        crear
                      </button>
                    </>
                  )}
                </div>
              );
            })}
        </div>
      )}

      {numberIni && (
        <input onClick={() => resetForm()} type="button" value="Reiniciar" />
      )}
    </div>
  );
};

export default Test;

1 respuesta 1

1

Lo que intentas hacer puede hacerse de 2 maneras posibles:

  • Al cambiar el valor del select.
  • Al presionar el botón crear.

Como no estaba seguro de en qué momento querías hacerlo hice ambas y tomas la que más se ajuste a tu necesidad.

Lo más importante, es cómo estás almacenando la información, en tu caso es un arreglo selectedNumbers. Entonces, mi recomendación es simplemente sumar todos los valores del arreglo. Yo lo he hecho con un reduce Documentación acá. Pero al final puedes hacerlo hasta con un for o forEach

Paso 1: Obtener el valor

  • Con reduce
const result = selectedNumbers.reduce((acc, value) => acc + +value, 0)
  • Con forEach
let result = 0;
selectedNumbers.forEach((value) => { result += +value });
  • Con for
let result = 0;
for (let i = 0; i < selectedNumbers.length; i++) {
  result += +value;
}

Paso 2: Cuándo establecerlo?

  • Si tienes que cambiarlo cada vez que cambia un select, entonces es tan sencillo que no tendrás que hacer nada (ve en mi código completo acc)

  • Si tienes que cambiarlo Después de que presionan crear entonces, necesitas una variable adicional que tenga este valor y la actualizas cada vez que presionan el botón de crear. (ve en mi código completo confirmedAcc)

Código Completo:

const Test = () => {
  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
  const [numberIni, setnumberIni] = useState(initialState.first);
  const [selectedNumbers, setSelectedNumbers] = useState([]);
  const [confirmedAcc, setConfirmedAcc] = useState(0);

  const getArray = (value) => {
    const numValue = parseInt(value, 10);
    const arr = [];
    for (let i = 0; i < numValue - 1; i++) {
      arr.push(numValue - i - 1);
    }
    if (arr.length) {
      return arr;
    }
  };
  
  const setSelect = (value) => {
    let isArray = getArray(value);
    if (isArray) {
      setarraySelect([...arraySelect, isArray]);
    }
    // Cambia cada vez que presionan el botón crear
    setConfirmedAcc(selectedNumbers.reduce((acc, value) => acc + +value, 0));
  };

  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setnumberIni(event.target.numberIni.value - 1);
  };

  const resetForm = () => {
    setnumberIni(null);
    setarraySelect([]);
  };

  // Cambia cada vez que cambian un select
  const acc = selectedNumbers.reduce((acc, value) => acc + +value, 0);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="numberIni" type="number" />

        <input type="submit" value="Generar select" />
      </form>
      {numberIni && (
        <div>
          <select
            onChange={(e) => handleChange(0, e.target.value)}
            name=""
            id=""
          >
            <option value="seleccione">Seleccione</option>
            {Array(parseInt(numberIni))
              .fill(1)
              .map((value, key) => {
                return (
                  <option value={numberIni - key}>{numberIni - key}</option>
                );
              })}
          </select>
          <button
            type="submit"
            className="btn btn-success"
            onClick={() => {
              setSelect(selectedNumbers[0]);
            }}
          >
            crear
          </button>
          {Array(parseInt(numberIni))
            .fill(1)
            .map((value, key2) => {
              return (
                <div>
                  {arraySelect[key2] && (
                    <>
                      <select
                        onChange={(e) => handleChange(key2 + 1, e.target.value)}
                        name=""
                        id=""
                      >
                        <option value="seleccione">Seleccione</option>
                        {arraySelect[key2].map((value, key3) => {
                          return (
                            <option value={arraySelect[key2][key3]}>
                              {arraySelect[key2][key3]}
                            </option>
                          );
                        })}
                      </select>
                      <button
                        type="submit"
                        className="btn btn-success"
                        onClick={() => {
                          setSelect(selectedNumbers[key2 + 1]);
                        }}
                      >
                        crear
                      </button>
                    </>
                  )}
                </div>
              );
            })}
        </div>
      )}
      <input type="text" value={acc} /> vs{" "}
      <input type="text" value={confirmedAcc} />
      <br />
      {numberIni && (
        <input onClick={() => resetForm()} type="button" value="Reiniciar" />
      )}
    </div>
  );
};

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.