Tengo este formulario en uno de mis componentes de reacción.
<div className="form-check"> <input type="radio" className="form-check-input" value={3} name="priority" /> <label className="form-check-label">High Priority</label> </div> <div className="form-check"> <input type="radio" value={2} className="form-check-input" name="priority" /> <label className="form-check-label">Medium Priority</label> </div> <div className="form-check"> <input type="radio" value={1} className="form-check-input" name="priority" /> <label className="form-check-label">Low Priority</label> </div>Luego tengo una función onclick en un botón. Quiero obtener el valor del formulario de radio en mi función. ¿Cómo puedo hacer eso? ¿Hay alguna manera de hacerlo con el gancho useRef? Nota: estoy usando componentes funcionales, por lo que cualquier solución con componentes de clase no ayudará.
¡Gracias!
Use el estado para mantener el valor de la entrada de radio seleccionada.
Agregamos un oyente al elemento principal para que podamos usar la delegación de eventos que llama a una función cuando captura un evento de cambio de un elemento de entrada secundario. Cuando se llama, comprueba que el elemento en el que se hizo clic es una entrada (radio) y luego establece el estado con su valor.
El botón simplemente registra el estado actual.
const { useState } = React; function Example() { // Initialise state const [ radio, setRadio ] = useState(0); // When the button is clicked log the current state function handleClick(e) { console.log(radio); } // When an element is clicked function handleChange(e) { // Grab the nodeName and value from // the clicked element const { nodeName, value } = e.target; // Because we're using event delegation (attaching // an event listener to a parent element and capturing // events from child elements as they "bubble up" the DOM) // we need to check to see if the clicked element is an input if (nodeName === 'INPUT') { // Set the state with the input value setRadio(value); } } return ( <div onChange={handleChange}> <div className="form-check"> <input type="radio" className="form-check-input" value={3} name="priority" /> <label className="form-check-label">High Priority</label> </div> <div className="form-check"> <input type="radio" value={2} className="form-check-input" name="priority" /> <label className="form-check-label">Medium Priority</label> </div> <div className="form-check"> <input type="radio" value={1} className="form-check-input" name="priority" /> <label className="form-check-label">Low Priority</label> </div> <button onClick={handleClick}>Show radio state</button> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); button { margin-top: 0.5em; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>He creado una demostración aquí, puede agregar el método onChange a cada entrada y luego guardar dentro en un estado.
Demostración:https://codesandbox.io/s/tender-sinoussi-1t7fi?file=/src/App.js