根据React中的状态设置表单的值

问题描述

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

例如，将mainAddress的值复制到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: '',};
    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.setFieldValue(values.mainAddress)
     : console.log('nope')}

另一个是：(this.state.setAddress ? values.address = values.mainAddress)

它们都不起作用。是否可以从values.mainAddress获取值并将其复制到values.address？还是输入？

解决方法

您可以相应地重写Field组件的地址。

package main

import (
    "bytes"
    "fmt"
    "io/ioutil"
    "log"

    "golang.org/x/text/encoding/ianaindex"
    "golang.org/x/text/transform"
)

func main() {
    text := "\xa35 for Pepp\xe9"
    charset := "latin1"
    e,err := ianaindex.MIME.Encoding(charset)
    if err != nil {
        log.Fatal(err)
    }
    r := transform.NewReader(bytes.NewBufferString(text),e.NewDecoder())
    result,err := ioutil.ReadAll(r)
    if err != nil {
        log.Fatal(err)
    }
    fmt.Printf("%s\n",result) //outputs £5 for Peppé
}

在这里，我们将地址字段的值设置为values.mainAddress，如果选中了setAdress复选框，否则我们将使用formik值来填充它。

这是工作代码和邮箱代码-https://codesandbox.io/s/fervent-tereshkova-sro93?file=/index.js

,

Formik还提供了values对象，您可以使用该对象更新与mainAddress相同的地址值。只需为两个输入字段提供name属性，然后像这样分配-props.values.address = {... props.values.mainAddress}

,

我认为您应该这样做：

{this.state.setAddress
   ? this.setState({address: this.state.mainAddress})
   : console.log('setAddress is false')}

在第二个示例（“另一个”）上，由于不使用:，因此没有使用三元运算符。