¿Cómo puedo obtener valor con la matriz de nombre de entrada en el componente funcional basado en reaccionar js?
Aquí está mi código
<form method="post" onSubmit={handleSubmit}> <input type="text" name="otp[]" placeholder="0" className="form-control inputs"/> <input type="text" name="otp[]" placeholder="0" className="form-control inputs"/> <input type="text" name="otp[]" placeholder="0" className="form-control inputs"/> <input type="text" name="otp[]" placeholder="0" className="form-control inputs"/> <button className="btn btn-default text-light pos-rel">Verify</button> </form>Gracias por adelantado
Debe almacenar valores de entrada con estado, para esto sugiero un objeto.
const [values, setValues] = useState({otp1: 0, otp2: 0, ...restOfTheInputs });Luego, puede activar un cambio de estado cuando se cambia una entrada agregando un accesorio onChange a sus entradas. (También debe dar a estas entradas un nombre único)
<input type="text" name="otp1" value={values.opt1} onChange={(e) => handleInput(e)} />en esta función, querrá actualizar el estado con el nuevo valor para la entrada reemplazando cualquier valor anterior mientras mantiene los valores de las otras entradas.
const handleInput = (event) => { const {name, value} = event.target; setValues(currentValue => ({...currentValue, ...{name: value}})) }