Javascript 根据React中的状态设置窗体的值

使用Formik验证某些字段，如果状态值为true，我希望将一个字段的值复制到另一个字段的值

例如，要复制到

地址的
main address
的值

有一个状态变量，
setAddress
，设置为false，但单击复选框时可以将其更改为true

当此变量设置为true时，我希望将
mainAddress
的值复制到
address

这是不复制该值即可正常工作的代码：

import React from 'react';
import { Formik, Form, Field } from 'formik';
import { Input, Button, Label, Grid } from 'semantic-ui-react';
import * as Yup from 'yup';
import { Creators } from '../../../actions';
import './CreateCompanyForm.scss';

class CreateCompanyForm extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = { // state variables 
      address: '',
      mainAddress: '',
      setAddress: false,
    };
  }

  handleSubmit = values => {
    // create company
  };

  toggleAddress = () => { // it toggles the value of setAddress
    this.setState(prevState => ({
      setAddress: !prevState.setAddress,
    }));
  };

  render() {
    const initialValues = { // the address and mainAddress are set to '' at the start
      address: '',
      mainAddress: '',
    };
    const validationSchema = Yup.object({
      address: Yup.string().required('error'),
      mainAddress: Yup.string().required('error'),
    });
    return (
      <>
        <Button type="submit" form="amazing"> // button for submit
          Create company
        </Button>

        <Formik
          htmlFor="amazing"
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={values => this.handleSubmit(values)}>
          {({ values, errors, touched, setValues, setFieldValue }) => (
            <Form id="amazing">
              <Grid>
                <Grid.Column> // mainAddress value
                  <Label>Main Address</Label>
                  <Field name="mainAddress" as={Input} />
                </Grid.Column>

                <Grid.Column> // address value
                  <Label>Address</Label>
                  <Field name="address" as={Input} />
                  <div>
                    {this.state.setAddress // here is how I've tried to set that value
                      ? values.address.setFieldValue(values.mainAddress)
                      : console.log('nope')}
                    {touched.address && errors.address ? errors.address : null}
                  </div>
                </Grid.Column>
              </Grid>
              <Checkbox
                label="Use same address"
                onClick={() => this.toggleAddress()}
              />
            </Form>
          )}
        </Formik>
      </>
    );
  }
}

另一个是：
（this.state.setAddress？values.address=values.mainAddress）

它们都不起作用。是否可以从
values.mainAddress
获取值并将其复制到
values.address
？或其输入？
您可以相应地重写地址的字段组件

<Field name="address">
 {({
    field, // { name, value, onChange, onBlur }
 }) => {
   values.address = values.mainAddress;
   return (
     <div>
        <input
           {...field}
           type="text"
           placeholder="Address"
         />
      </div>
    );
  }}
</Field>


{({
字段，//{name，value，onChange，onBlur}
}) => {
values.address=values.main地址；
返回(
);
}}

在这里，我们将地址字段的值设置为values.mainAddress，如果选中了setAddress复选框，则让formik值填充它

这是工作代码沙盒代码-
Formik还提供了一个对象值，您可以使用该对象更新与mainAddress相同的地址值。只需为两个输入字段提供name属性，然后按如下方式分配-props.values.address={…props.values.mainAddress}
您可以展开您的答案吗？当您在代码中从此字段中解构值时，
{（{值，错误，触摸，setValues，setFieldValue}）
，您可以在触发复选框内的onClick时执行此操作：
onClick={（）=>values.address=values.mainAddress}
它可以从
mainAddress
获取值并复制到
address
。但是，我无法提交表单，因为它说表单无效。发生这种情况的原因是
values
对象上没有更新表单。该对象看起来如下：
{address:，mainAddress:“mytext”}
。有没有办法也更新这个？我试过这样做：
this.state.setAddress？（values.mainAddress，values.address=values.mainAddress）：field.value}
但不起作用，错误：
箭头函数不应返回赋值
和
函数参数“值”属性的赋值
我更新了答案。请查收。现在应该可以了。我也更新了代码沙盒代码。
<Field name="address">
 {({
    field, // { name, value, onChange, onBlur }
 }) => {
   values.address = values.mainAddress;
   return (
     <div>
        <input
           {...field}
           type="text"
           placeholder="Address"
         />
      </div>
    );
  }}
</Field>