如何使用 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>
    )};

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

现在，即使用户选择的选项是选项 1 或选项 2 或选项 3，用户也可以打开或关闭 SWITCH_KEY。

我如何修改上面的代码，这意味着我应该如何根据用户选择的选项设置 SWITCH_KEY 状态，然后如果用户切换它，我如何将 SWITCH_KEY 设置为打开或关闭。 有人可以帮我解决这个问题吗？

我是使用 formik 和 react 的新手。 谢谢。

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