切换到formik中字段之间的复制值

Question

嗨，我正在NextJS上构建带有Formik的表单，我正在放置一个开关，以使用户有可能使用联系方式进行发票。

我有有关联系方式和发票详细信息的不同字段，但我想添加一个将联系人Infos复制到发票详细信息表格中的开关。

这就是我现在正在做的：

<Formik
                initialValues={{
                    passengers: passengers,
                    contact: contactDetails,
                  invoice: useContactDetails ? {...invoiceDetails, ...contactDetails} : invoiceDetails
                }}
                onSubmit={
                    (values, actions) => {
                       console.log(values)
                    }
                }
            >
                {({errors, touched, isSubmitting}: any) => (
                    <Form>
                        <PassengerItem>
                            <PassengerHeaderContainer>
                                <PassengerHeader>
                                    {(t('flightsCheckout.main.contactDetails'))}
                                </PassengerHeader>
                            </PassengerHeaderContainer>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.firstName')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. John (Given Name)"
                                        name={`contact.firstName`}
                                        required
                                    />
                                </InputGroup>
                                <DottedLinesContainer>
                                    <DottedLines />
                                </DottedLinesContainer>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.lastName')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. Smith (Last Name)"
                                        name={`contact.lastName`}
                                        required
                                    />
                                </InputGroup>
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.phoneNumber')}
                                    </InputLabel>
                                    <TextInput
                                        type="tel"
                                        placeholder="E.G. +30 645 654 9850"
                                        name={`contact.phoneNumber`}
                                        required
                                    />
                                </InputGroup>
                                <DottedLinesContainer>
                                    <DottedLines />
                                </DottedLinesContainer>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.emailAddress')}
                                    </InputLabel>
                                    <TextInput
                                        type="email"
                                        placeholder="E.G. [email protected]"
                                        name={`contact.emailAddress`}
                                        required
                                    />
                                    {
                                        errors.contactEmail &&
                                        <ErrorText>{errors.contactEmail}</ErrorText>
                                    }
                                </InputGroup>
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.country')}
                                    </InputLabel>
                                    <TextInput name={`contact.country`} required as="select" style={{background: "none"}}>
                                        <option style={{color: "#ADADAD"}} value="" disabled selected>E.G. United Kingdom</option>
                                        <option value="spain">Spain</option>
                                        <option value="morocco">Morocco</option>
                                        <option value="romania">Romania</option>
                                    </TextInput>
                                </InputGroup>
                            </FormGroup>

                        </PassengerItem>

                        <PassengerItem>
                            <PassengerHeaderContainer>
                                <PassengerHeader>
                                    {(t('flightsCheckout.main.invoiceDetails'))}
                                </PassengerHeader>
                            </PassengerHeaderContainer>

                            <FormGroup>
                                <CustomSwitch
                                    label={t('flightsCheckout.main.sameAsContact')}
                                    state={useContactDetails}
                                    setState={setUseContactDetails}
                                />
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.firstName')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. John (Given Name)"
                                        name={`invoice.firstName`}
                                        required
                                    />
                                </InputGroup>
                                <DottedLinesContainer>
                                    <DottedLines />
                                </DottedLinesContainer>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.lastName')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. Smith (Last Name)"
                                        name={`invoice.lastName`}
                                        required
                                    />
                                </InputGroup>
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.phoneNumber')}
                                    </InputLabel>
                                    <TextInput
                                        type="tel"
                                        placeholder="E.G. +30 645 654 9850"
                                        name={`invoice.phoneNumber`}
                                        required
                                    />
                                </InputGroup>
                                <DottedLinesContainer>
                                    <DottedLines />
                                </DottedLinesContainer>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.emailAddress')}
                                    </InputLabel>
                                    <TextInput
                                        type="email"
                                        placeholder="E.G. [email protected]"
                                        name={`invoice.emailAddress`}
                                        required
                                    />
                                    {
                                        errors.invoiceEmail &&
                                        <ErrorText>{errors.invoiceEmail}</ErrorText>
                                    }
                                </InputGroup>
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.country')}
                                    </InputLabel>
                                    <TextInput name={`invoice.country`} required as="select" style={{background: "none"}}>
                                        <option style={{color: "#ADADAD"}} value="" disabled selected>E.G. United Kingdom</option>
                                        <option value="spain">Spain</option>
                                        <option value="morocco">Morocco</option>
                                        <option value="romania">Romania</option>
                                    </TextInput>
                                </InputGroup>
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.address')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. 64 Notley Street"
                                        name={`invoice.address`}
                                        required
                                    />
                                </InputGroup>
                                <DottedLinesContainer>
                                    <DottedLines />
                                </DottedLinesContainer>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.city')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. London"
                                        name={`invoice.city`}
                                        required
                                    />
                                </InputGroup>
                            </FormGroup>

                            <FormGroup>
                                <InputGroup>
                                    <InputLabel>
                                        {t('flightsCheckout.main.zipCode')}
                                    </InputLabel>
                                    <TextInput
                                        type="text"
                                        placeholder="E.G. 40741"
                                        name={`invoice.zipCode`}
                                        required
                                    />
                                </InputGroup>
                            </FormGroup>
                        </PassengerItem>
                )}
            </Formik>

我尝试过，但它没有起作用...

Answer 1

我认为您想将 enableReInitialize 设置为在formik上的true，以便将其刷新新值。默认值设置为false，并且由于您正在更改初始值，因此您需要重新初始化