Quiero mostrar dinámicamente la suma de los valores ingresados frente a mi etiqueta, debería agregarse automáticamente, por ejemplo: puede ver la imagen a continuación como referencia Esta debería ser la salida
Establecí el estado, pero no obtengo la lógica para agregar los números, solo configuré el valor, puede ver la imagen a continuación . Configuré solo el valor.
Aquí está mi código
// import logo from './logo.svg'; import React, {useState} from "react" import './App.css'; function App() { const [first, setfirst] = useState(0) const addChange=(e)=>{ setfirst(e.target.value) Math. } return ( <> <label>Sum of inputs:{first} <input type="text" onChange={addChange}></input></label> </> ); } export default App;Por favor, hágamelo saber, si necesito proporcionar más detalles.
puede dividir el valor con "," y encontrar la suma de la matriz:
export default function App() { const [first, setfirst] = useState(0) const addChange=(e)=>{ const sumArr = e.target.value.split(","); const sum = sumArr.reduce(function(a, b){ return parseInt(a) + parseInt(b); }, 0); if(sum) { setfirst(sum); } } return ( <div className="App"> <> <label>Sum of inputs:{first} <input type="text" onChange={addChange}></input></label> </> </div> ); }Debe tomar el valor de su entrada como una cadena y hacer una división (",") para eliminar cada número de la cadena y analizarlos en número. Después de eso, debes sumar cada número para obtener la suma.
Puede usar la lógica de dividir la cadena y luego sumar el número. Dado que es un cuadro de texto gratuito, asegúrese de agregar un cheque para NaN
const addChange=(e)=>{ setfirst(e.target.value.split(',').reduce((a, c) => a + (isNaN(+c) ? 0 : +c), 0)) }