Quiero establecer el valor del interruptor de palanca en función de otro campo de formulario que el usuario haya establecido usando reaccionar, mecanografiado y formik.
¿Qué estoy tratando de hacer? el código es como a continuación
en el archivo de constantes
export const OPTION_KEY = 'option'; export const SWITCH_KEY = 'switch'; export const initialValues: SomeValues = { [OPTION_KEY] = '', [SWITCH_KEY] = '', };en otro archivo
import {OPTION_KEY, SWITCH_KEY} from 'constants'; const options: SelectOption[] = [ { value: 'option1', label: 'option1' }, { value: 'option2', label: 'option2' }, { value: 'option3', label: 'option3' }, ]; const FirstStep = ({formikBag} : formikBag: FormikProps<SomeValues>;}) => { return( <FormField label="Option" fieldId={OPTION_KEY}> {({field, form}: FieldProps) => ( <Select id={field.name} inputId={field.name} onChange={(option: SelectOption) => form.setFieldValue(field.name, option.value) } options={options} placeholder={options[0].label} value={options.filter(option=> option.value === field.value)} /> </FormField> <FormField label="switch" fieldId={SWITCH_KEY}> {({ field, form }: FieldProps) => ( <Switch id={'switch'} {...field} checked={isSwitchToggled} onChange={() => { form.setFieldValue(SWITCH_KEY,''); } }} /> )} </FormField> )};Ahora, lo que quiero hacer es que, cuando el usuario seleccione la opción 1 o la opción 2 en el menú de selección (es decir, OPTION_KEY), entonces, de manera predeterminada, quiero que SWITCH_KEY esté apagado. si el usuario selecciona la opción 3, entonces, por defecto, SWITCH_KEY debe estar activado.
ahora el usuario también puede activar o desactivar SWITCH_KEY aunque la opción seleccionada por el usuario sea la opción 1, la opción 2 o la opción 3.
¿Cómo puedo modificar el código anterior? ¿Cómo debo configurar el estado SWITCH_KEY en función de la opción seleccionada por el usuario y luego, si el usuario lo cambia, cómo puedo activar o desactivar SWITCH_KEY? Podría alguien ayudarme con esto.
Soy nuevo en el uso de formik y reacciono. Gracias.
Mantenga el estado de su interruptor en algún lugar del estado del componente, por ejemplo. isSwitchToggled (no sé qué está haciendo esta variable suya isSwitchToggled , pero seguro que parece una variable de estado) y simplemente modifique esa variable de estado según la opción elegida. Luego, renderice su interruptor en consecuencia:
const FirstStep = ({formikBag} : formikBag: FormikProps<SomeValues>;}) => { const [isSwitchToggled, setSwitchToggled] = React.useState(false); const setSwitch = (fieldName, fieldValue) => { if (fieldName === 'name' && fieldValue === 'John') { setSwitchToggled(true); } else setSwitchToggled(false); } return( <FormField label="Option" fieldId={OPTION_KEY}> {({field, form}: FieldProps) => ( <Select id={field.name} inputId={field.name} onChange={(option: SelectOption) => form.setFieldValue(field.name, option.value) setSwitch(field.name, option.value) } options={options} placeholder={options[0].label} value={options.filter(option=> option.value === field.value)} /> </FormField> <FormField label="switch" fieldId={SWITCH_KEY}> {({ field, form }: FieldProps) => ( <Switch id={'switch'} {...field} checked={isSwitchToggled} onChange={() => { form.setFieldValue(SWITCH_KEY,''); } }} /> )} </FormField> )};