Блог

я хочу установить значение переключателя на основе другого поля формы, заданного пользователем с помощью react, typescript и formik.

что я пытаюсь сделать? код выглядит так, как показано ниже

в файле констант

 export const OPTION_KEY = 'option'; export const SWITCH_KEY = 'switch'; export const initialValues: SomeValues = {  [OPTION_KEY] = '',  [SWITCH_KEY] = '', };   

в другом файле

 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: FormikPropslt;SomeValuesgt;;}) =gt; {  return(  lt;FormField label="Option" fieldId={OPTION_KEY}gt;  {({field, form}: FieldProps) =gt; (  lt;Select  id={field.name}  inputId={field.name}  onChange={(option: SelectOption) =gt;  form.setFieldValue(field.name, option.value)  }  options={options}  placeholder={options[0].label}  value={options.filter(option=gt; option.value === field.value)}  /gt;  lt;/FormFieldgt;  lt;FormField label="switch" fieldId={SWITCH_KEY}gt;  {({ field, form }: FieldProps) =gt; (  lt;Switch  id={'switch'}  {...field}  checked={isSwitchToggled}  onChange={() =gt; {  form.setFieldValue(SWITCH_KEY,'');  }  }}  /gt;  )}  lt;/FormFieldgt;  )};  

Теперь я хочу сделать следующее: когда пользователь выбирает опцию 1 или опцию 2 в меню выбора (то есть OPTION_KEY), по умолчанию я хочу, чтобы переключатель был выключен. если пользователь выбирает опцию 3, то по умолчанию должна быть включена клавиша SWITCH_KEY.

теперь пользователь также может включать или выключать переключатель, даже если выбранная пользователем опция является опцией 1, опцией 2 или опцией 3.

как я могу изменить приведенный выше код, означающий, как я должен установить состояние SWITCH_KEY в зависимости от выбранного пользователем параметра, а затем, если пользователь переключит его, как я могу включить или выключить переключатель. не мог бы кто-нибудь помочь мне с этим.

Я новичок в использовании formik и react. Спасибо.

Сохраните состояние вашего коммутатора где-нибудь в состоянии компонента, например isSwitchToggled (укажите, что делает эта ваша переменная isSwitchToggled , но она наверняка выглядит как переменная состояния), и просто измените этот параметр состояния на основе выбранной опции. Затем отрисовайте свой переключатель соответствующим образом:

 const FirstStep = ({formikBag} : formikBag: FormikPropslt;SomeValuesgt;;}) =gt; {  const [isSwitchToggled, setSwitchToggled] = React.useState(false);   const setSwitch = (fieldName, fieldValue) =gt; {  if (fieldName === 'name' amp;amp; fieldValue === 'John') {  setSwitchToggled(true);  } else setSwitchToggled(false);  }   return(  lt;FormField label="Option" fieldId={OPTION_KEY}gt;  {({field, form}: FieldProps) =gt; (  lt;Select  id={field.name}  inputId={field.name}  onChange={(option: SelectOption) =gt;  form.setFieldValue(field.name, option.value)   setSwitch(field.name, option.value)  }  options={options}  placeholder={options[0].label}  value={options.filter(option=gt; option.value === field.value)}  /gt;  lt;/FormFieldgt;  lt;FormField label="switch" fieldId={SWITCH_KEY}gt;  {({ field, form }: FieldProps) =gt; (  lt;Switch  id={'switch'}  {...field}  checked={isSwitchToggled}  onChange={() =gt; {  form.setFieldValue(SWITCH_KEY,'');  }  }}  /gt;  )}  lt;/FormFieldgt;  )};