如何使用react，typescript和formik根据另一个表单字段设置表单字段的值？

Question

我想根据用户使用 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: 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>
    )};

现在我要做的是，当用户在选择菜单中选择选项 1 或选项 2（即 OPTION_KEY）时，默认情况下我希望关闭 SWITCH_KEY。如果用户选择选项 3，则默认情况下 SWITCH_KEY 应打开。

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

我如何修改上面的代码，这意味着我应该如何根据用户选择的选项设置 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>
    )};