0
226
Vistas¿Cómo validar y obtener datos de un botón de radio con cuadro de entrada en reactjs?
Soy nuevo en reaccionar. Tengo un escenario en el que tengo varios botones de opción y algunos de los botones de opción tienen un cuadro de entrada asociado. Como en la imagen de abajo:
lo que quiero es:
Si el usuario marcó cualquier botón de opción que tenga un cuadro de entrada asociado, ese cuadro de entrada se convertirá en un campo obligatorio. (muestra el mensaje de validación "se requiere entrada" al hacer clic en el botón; de lo contrario, muestra los datos en la consola).
Si todo está bien, al hacer clic en el botón Guardar, se mostrarán los datos en el
consola.
He escrito algo de código. Este código se valida si ninguno de los botones de radio está marcado al hacer clic en el botón (caso obvio). Pero no entiendo cómo lograr el requisito anterior.
import React from "react"; const ContactUsForm = () => { const isFormValid = () => { var radios = document.getElementsByName("myRadio"); var isValid = false; var i = 0; while (!isValid && i < radios.length) { if (radios[i].checked) isValid = true; i++; } return isValid; }; const handleButtonClick = () => { if (!isFormValid()) { alert("Select atleast one radio button"); } else { alert("Success"); } }; return ( <div> {" "} <br /> <label> <input type="radio" name="myRadio" value="Graduate" /> I am graduate </label>{" "} <br /> <label> <input type="radio" name="myRadio" value="Something" /> Some radio button </label>{" "} <br /> <label> <input type="radio" name="myRadio" />I am graduate from university name </label>{" "} <input type="text" id="other" /> <br /> <label> <input type="radio" name="myRadio" /> Other </label> <input type="text" id="other2" /> <br /> <button onClick={handleButtonClick} type="submit"> Save </button>{" "} <br /> </div> ); }; export default ContactUsForm;¿Alguien puede ayudarme a lograr el requisito anterior en reaccionar? Gracias
1 Respuestas
Responde la pregunta0
Entonces deberías usar el gancho React State.
Para cada entrada, debe agregar el evento onClick .
Declarar estado:
const [radioBtn, setRadioBtn] = useState(null);Cambiar estado para cada clic de botón:
<input type="radio" name="myRadio" value="Graduate" onClick={() => setRadioBtn('Graduate')}/> I am graduateAl final, todo lo que necesita hacer es hacer clic en Guardar y puede administrar todo lo que necesita en handleButtonClick
<button onClick={handleButtonClick} type="submit"> Save </button> Aquí puedes validar todo lo que necesites. En lugar de alert , puede usar console.log(radioBtn) para obtener resultados en la consola.
const handleButtonClick = () => { if (radioBtn) { alert(radioBtn); } else { alert(radioBtn + ' fail'); } }