如何使用react, typescript和formik基于另一个表单字段设置表单字段的值?

Question

我想根据用户使用react, typescript和formik设置的另一个表单字段设置toggle switch的值。

我想做什么?代码如下

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: 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>
)};

现在我想做的是，当用户在选择菜单中选择option1或option2(即OPTION_KEY)时，默认情况下我希望SWITCH_KEY被关闭。如果用户选择了option3，那么默认情况下SWITCH_KEY应该是打开的。

现在用户也可以切换SWITCH_KEY打开或关闭，即使用户选择的选项是option1或option2或option3。

我如何修改上面的代码意味着我应该如何根据用户选择的选项设置SWITCH_KEY状态，然后如果用户切换它，我如何将SWITCH_KEY设置为打开或关闭。有人能帮我一下吗?

我是新使用formik和反应。谢谢。

Answer 1

将开关的状态保持在组件的状态中，例如:isSwitchToggled(不知道你的变量isSwitchToggled在做什么，但它看起来确实像一个状态变量)然后根据选择的选项修改状态变量。然后，相应地渲染你的开关:

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>
)};