En mi aplicación ReactJs, solo quiero obtener los valores de los campos que se muestran en la pantalla, por ejemplo, tengo algunos grupos de radio y un grupo se ocultará cuando elijo un valor específico como el siguiente código:
const App = () => { const [value, setValue] = useState(); const [value2, setValue2] = useState(); const onChange = (e) => { setValue(e.target.value); }; const onChange2 = (e) => { setValue2(e.target.value); }; return ( <div className='container'> <div> <Radio.Group value={value} onChange={onChange}> <Radio value={1}>yes</Radio> <Radio value={2}>no</Radio> </Radio.Group> </div> {value === 1 ? null : ( <div> <Radio.Group value={value2} onChange={onChange2}> <Radio value={3}>yes</Radio> <Radio value={4}>no</Radio> </Radio.Group> </div> )} </div> ); };como puede ver en mi código simple, cuando el valor en el primer grupo de radio es '1', el segundo grupo de radio se ocultará. pero, si elijo en el segundo grupo de radio algún valor (3 o 4) y luego selecciono en el primer grupo de radio el valor '1', el valor en el segundo seguirá siendo el que elegí antes.
Este caso es simple para restablecer un campo o ignorarlo, pero si tengo un formulario con 20 campos, quiero obtener solo los campos que se muestran en la pantalla, incluso si no restablecí los campos ocultos.
¿Hay una manera de obtener todos los valores que se representan en div 'contenedor' o una mejor manera de hacerlo?
Prueba esto
// This means "whenever the second group becomes hidden, reset its state to default" useEffect(() => { const secondIsHidden = value === 1; if (secondIsHidden) setValue2(undefined); // Or whatever }, [value]);Creé un estado y con cada clave establecí el valor booleano. Si not-hidden , configuro falso, de lo contrario, es verdadero.
const App = () => { const [value, setValue] = useState(); const [value2, setValue2] = useState(); const [radioValues, setRadioValues] = useState({ 1: false, 2: false, 3: false, 4: false }); const onChange = (e: any) => { setRadioValues((prev) => { let newValues: any = {}; Object.entries(prev).forEach((item: any) => { newValues[parseInt(item[0])] = e.target.value === 1 ? [3, 4].includes(parseInt(item[0])) : false; }); return newValues; }); setValue(e.target.value); }; const onChange2 = (e: any) => { setValue2(e.target.value); }; console.log(Object.keys(radioValues).filter((key) => !radioValues[key])); return ( <div className='container'> <div> <Radio.Group value={value} onChange={onChange}> <Radio value={1}>yes</Radio> <Radio value={2}>no</Radio> </Radio.Group> </div> {value === 1 ? null : ( <div> <Radio.Group value={value2} onChange={onChange2}> <Radio value={3}>yes</Radio> <Radio value={4}>no</Radio> </Radio.Group> </div> )} </div> ); }; export default App;