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

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

现在用户还可以打开或关闭 SWITCH_KEY，即使用户 select 设置的选项是选项 1、选项 2 或选项 3。

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

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

How to set the value of form field based on another form field using react, typescript and formik?

javascript

typescript

reactjs

formik