Good day
i am doing a survey, but i can't get the values and then get the total from them, i don't have to much exp with react and js. but im willing to learn.
I tryed with map, reduce, etc, but i dont know very well how to make it work, and the code below is the basic form. also i tried with nested arrys, but the onChange parameter got so dificult
I hope u guys can help me, get the values from the selected radio option, and then sum the values from each item selected.
best regars.
import { useForm } from "react-hook-form";
import { useState } from 'react';
function App() {
//Manejo Errores
const { register, handleSubmit,formState:{errors} } = useForm();
//Submit
const onSubmit = (data) => alert(JSON.stringify(data));
//Puntuacion
const [puntuacion, total ] = useState();
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<table className='Pauta'>
<thead>
<tr>
<th scope="col">Parametro</th>
<th scope="col">Situacion del adulto mayor</th>
<th scope="col">Puntuacion</th>
</tr>
</thead>
<tbody>
<tr>
<td className='asignacion'>Comer</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="10" onChange={e=>total(e.target.value)} {...register('Comer', { required: "necesita seleccionar una opcion" })} ></input>Totalmente independiente. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Comer', { required: "necesita seleccionar una opcion" })} ></input>Necesita ayuda para cortar carne,el pan,etc.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Comer", { required: "necesita seleccionar una opcion" })} ></input>Dependiente. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
10<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className='asignacion'>Lavarse</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Lavarse', { required: "necesita seleccionar una opcion" })} ></input>Independiente entra y sale solo del baño. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register('Lavarse',{required:"necesita seleccionar una opcion"})} ></input>Dependiente.<br/>
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
5<br />
0<br />
</td>
</tr>
<tr>
<td className='asignacion'>Vestirse</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Vestirse', { required: "necesita seleccionar una opcion" })} ></input>Independiente: capz de ponerse y quitarse la ropa, abotonarse, atarse los zapatos. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Vestirse', { required: "necesita seleccionar una opcion" })} ></input>Necesita ayuda.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Vestirse", { required: "necesita seleccionar una opcion" })} ></input>Dependiente. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
10<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className='asignacion'>Deposiciones<br/>(valorese la semana pasada)</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Deposiciones', { required: "necesita seleccionar una opcion" })} ></input>Contenencia normal. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Deposiciones', { required: "necesita seleccionar una opcion" })} ></input>Ocacionalemte algun episodio de incontinecnia o <br/> necesita ayuda para la administracion de supositorios o lavativas.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Deposiciones", { required: "necesita seleccionar una opcion" })} ></input>incontinecnia. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
10<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className='asignacion'>Miccion<br/>(valorese la semana pasada) </td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Miccion', { required: "necesita seleccionar una opcion" })} ></input>Contenencia normal o es capaz de cuidarse de la sonda si tiene una puesta. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Miccion', { required: "necesita seleccionar una opcion" })} ></input>Un episodio como maximo de incontinencia o necesita ayuda para cuidar de la sonda.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Miccion", { required: "necesita seleccionar una opcion" })} ></input>incontinecnia. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
10<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className='asignacion'>Usar el restrete</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Usuar el retrete', { required: "necesita seleccionar una opcion" })} ></input>Independecia para ir al cuarto de aseo. Quitarse y ponerse la ropa <br />
<input type="radio" id='opcion-2' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Usuar el retrete', { required: "necesita seleccionar una opcion" })} ></input>Necesita ayuda para ir al retrete pero se limpia solo.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="0"onChange={e=>total(e.target.value)} {...register("Usuar el retrete",{required:"necesita seleccionar una opcion"})} ></input>Dependiente. <br/>
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
10<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className='asignacion'>Trasladarse</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="15" onChange={e=>total(e.target.value)}{...register('Trasladarse', { required: "necesita seleccionar una opcion" })} ></input>Independiente para ir del sillon a la cama. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Trasladarse', { required: "necesita seleccionar una opcion" })} ></input>Minima ayuda fisica o supervision para hacerlo.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register("Trasladarse", { required: "necesita seleccionar una opcion" })} ></input>Necesita ayuda pero es capaz de manternse sentado solo. <br />
<input type="radio" id='opcion-4' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Trasladarse", { required: "necesita seleccionar una opcion" })} ></input>Dependiente. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
15<br/>
10<br/>
5<br/>
0<br/>
</td>
</tr>
<tr>
<td className='asignacion'>Deambular</td>
<td>
<div className='descripcion'>
<input type="radio" id='opcion-1' name='puntuacion' value="15" onChange={e=>total(e.target.value)}{...register('Deambular', { required: "necesita seleccionar una opcion" })} ></input>Independiente, camina solo 50 metros. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Deambular', { required: "necesita seleccionar una opcion" })} ></input>Necesita ayuda fisica o supervision para caminar 50 metros.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register("Deambular", { required: "necesita seleccionar una opcion" })} ></input>Independiente en silla de ruedas sin ayuda. <br />
<input type="radio" id='opcion-4' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Deambular", { required: "necesita seleccionar una opcion" })} ></input>Dependiente. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
15<br/>
10<br/>
5<br/>
0<br/>
</td>
</tr>
<tr>
<td className='asignacion'>Escalones</td>
<td>
<div>
<input type="radio" id='opcion-1' name='puntuacion' value="10" onChange={e=>total(e.target.value)}{...register('Escalones', { required: "necesita seleccionar una opcion" })} ></input>Independiente para bajar y subir escaleras. <br />
<input type="radio" id='opcion-2' name='puntuacion' value="5" onChange={e=>total(e.target.value)}{...register('Escalones', { required: "necesita seleccionar una opcion" })} ></input>Necesita ayuda fisica o supervision para hacerlo.<br />
<input type="radio" id='opcion-3' name='puntuacion' value="0" onChange={e=>total(e.target.value)}{...register("Escalones", { required: "necesita seleccionar una opcion" })} ></input>Dependiente. <br />
</div>
<div>
{errors.Comer && <span>{errors.Comer.message}</span>}
</div>
</td>
<td className='valores'>
10<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td></td>
<td className='asignacion'>Total</td>
<td><h3>{puntuacion}</h3></td>
</tr>
</tbody>
</table>
<input type="submit" value="Enviar"></input>
</form>
</div>
);
}
export default App;
CodePudding user response：
Here is how to fix this issue:
import { useForm } from "react-hook-form";
import { useState } from "react";
function App() {
//Puntuacion
const [total, setTotal] = useState(0);
//Manejo Errores
const {
register,
handleSubmit,
getValues,
formState: { errors }
} = useForm();
//Submit
// const onSubmit = (data) => alert(JSON.stringify(data));
const onSubmit = (data) => console.log(data);
console.log(errors);
console.log("total", total);
const handleChange = () => {
console.log(getValues());
const data = getValues();
const values = Object.values(data);
const sum = values.reduce((acc, value) => {
if (value !== null) {
return acc Number(value);
}
return acc;
}, 0);
console.log(sum);
setTotal(sum);
};
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<table className="Pauta">
<thead>
<tr>
<th scope="col">Parametro</th>
<th scope="col">Situacion del adulto mayor</th>
<th scope="col">Puntuacion</th>
</tr>
</thead>
<tbody>
<tr>
<td className="asignacion">Comer</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Comer", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Totalmente independiente. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Comer", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Necesita ayuda para cortar carne,el pan,etc.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register(
"Comer",{
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
}
)}
></input>
Dependiente. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">Lavarse</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Lavarse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independiente entra y sale solo del baño. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Lavarse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Dependiente.
<br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">Vestirse</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Vestirse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independiente: capz de ponerse y quitarse la ropa, abotonarse,
atarse los zapatos. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Vestirse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Necesita ayuda.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Vestirse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Dependiente. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">
Deposiciones
<br />
(valorese la semana pasada)
</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Deposiciones", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Contenencia normal. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Deposiciones", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Ocacionalemte algun episodio de incontinecnia o <br />{" "}
necesita ayuda para la administracion de supositorios o
lavativas.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Deposiciones", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
incontinecnia. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">
Miccion
<br />
(valorese la semana pasada){" "}
</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Miccion", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Contenencia normal o es capaz de cuidarse de la sonda si tiene
una puesta. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Miccion", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Un episodio como maximo de incontinencia o necesita ayuda para
cuidar de la sonda.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Miccion", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
incontinecnia. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">Usar el restrete</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Usuar el retrete", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independecia para ir al cuarto de aseo. Quitarse y ponerse la
ropa <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Usuar el retrete", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Necesita ayuda para ir al retrete pero se limpia solo.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Usuar el retrete", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Dependiente. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">Trasladarse</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="15"
// onChange={(e) => total(e.target.value)}
{...register("Trasladarse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independiente para ir del sillon a la cama. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Trasladarse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Minima ayuda fisica o supervision para hacerlo.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Trasladarse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Necesita ayuda pero es capaz de manternse sentado solo. <br />
<input
type="radio"
id="opcion-4"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Trasladarse", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Dependiente. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
15
<br />
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">Deambular</td>
<td>
<div className="descripcion">
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="15"
// onChange={(e) => total(e.target.value)}
{...register("Deambular", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independiente, camina solo 50 metros. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Deambular", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Necesita ayuda fisica o supervision para caminar 50 metros.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Deambular", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independiente en silla de ruedas sin ayuda. <br />
<input
type="radio"
id="opcion-4"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Deambular", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Dependiente. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
15
<br />
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td className="asignacion">Escalones</td>
<td>
<div>
<input
type="radio"
id="opcion-1"
name="puntuacion"
value="10"
// onChange={(e) => total(e.target.value)}
{...register("Escalones", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Independiente para bajar y subir escaleras. <br />
<input
type="radio"
id="opcion-2"
name="puntuacion"
value="5"
// onChange={(e) => total(e.target.value)}
{...register("Escalones", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Necesita ayuda fisica o supervision para hacerlo.
<br />
<input
type="radio"
id="opcion-3"
name="puntuacion"
value="0"
// onChange={(e) => total(e.target.value)}
{...register("Escalones", {
required: "necesita seleccionar una opcion",
onChange: () => {
handleChange();
}
})}
></input>
Dependiente. <br />
</div>
<div>{errors.Comer && <span>{errors.Comer.message}</span>}</div>
</td>
<td className="valores">
10
<br />
5<br />
0<br />
</td>
</tr>
<tr>
<td></td>
<td className="asignacion">Total</td>
<td>
<h3>{total}</h3>
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
</div>
);
}
export default App;
Codesandbox Example: https://codesandbox.io/s/modest-ives-d8dchu