如何让 react-datepicker 更新 Formik 嵌套对象

Question

所以我在我的表单中设置了日期选择器，就像这样

<FieldArray
  name="config"
  render={(arrayHelpers) => (
   <div>
     {values.config.map((config, index) => (
       <div key={index}>

...

<DatePicker
 name={`config.${index}.date`}
 type="date"
 value={values.date}
 className={
 "form-control" +
 (errors.date&& touched.date
 ? " is-invalid"
 : "")
 }
 onChange={(e) =>
  setFieldValue("date", e)
}
/>

数据被添加到状态中，但作为附加字段而不是更新 formik 中的初始状态。它像这样更新。

{"domain_url":"","schema_name":"","name":"","config":[{"first":"","last":"","email":"","date":""}],"date":"2020-06-10T04:00:00.000Z"}

如果有任何想法，我将不胜感激。

下面是对大部分代码的新编辑。日期选择器没有在表单字段中显示日期，但它正在正确更新状态，现在我只需要它在表单中正确显示并格式化日期以在末尾删除字符串

static propTypes = {
    addTenant: PropTypes.func.isRequired,
  };

  onSubmit = (values) => {
    values.preventDefault();

    this.props.addTenant(values);
  };

  render() {
    const {
      domain_url,
      schema_name,
      name,
      config,
    } = this.state;

    const TenantSchema = Yup.object().shape({
      domain_url: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client URL header is required"),
      schema_name: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client db name is required"),
      name: Yup.string()
        .max(255, "Must be shorter than 255 characters")
        .required("Client name is required"),
    });
    return (
      <div className={s.root}>
        <Formik
          initialValues={{
            domain_url: "",
            schema_name: "",
            client_name: "",
            config: [
              {
                date: "",
                Tenant_description: "",
              },
            ],
          }}
          // validationSchema={TenantSchema} this is commented off because it breaks         
         submittions
          onSubmit={(values, { setSubmitting, resetForm }) => {
            setSubmitting(true);
            values.domain_url = values.domain_url + ".localhost";
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              resetForm();
              setSubmitting(false);
            }, 100);
          }}


        >
          {({
            values,
            errors,
            status,
            touched,
            handleBlur,
            handleChange,
            isSubmitting,
            setFieldValue,
            handleSubmit,
            props,
          }) => (
            <FormGroup>
              <Form onSubmit={handleSubmit}>
                <legend>
                  <strong>Create</strong> Tenant
                </legend>
                <FormGroup row>
                  <Label for="normal-field" md={4} className="text-md-right">
                    Show URL
                  </Label>
                  <Col md={7}>
                    <InputGroup>
                      <Field
                        id="appended-input"
                        name="domain_url"
                        type="text"
                        value={values.domain_url}
                        className={
                          "form-control" +
                          (errors.domain_url && touched.domain_url
                            ? " is-invalid"
                            : "")
                        }
                      />
                      <ErrorMessage
                        name="domain_url"
                        component="div"
                        className="invalid-feedback"
                      />
                      <InputGroupAddon addonType="append">
                        .localhost
                      </InputGroupAddon>
                    </InputGroup>
                  </Col>
                </FormGroup>
                <FormGroup row>
                  <Label for="normal-field" md={4} className="text-md-right">
                    Database Name
                  </Label>
                  <Col md={7}>
                    <Field
                      name="schema_name"
                      type="text"
                      className={
                        "form-control" +
                        (errors.schema_name && touched.schema_name
                          ? " is-invalid"
                          : "")
                      }
                    />
                    <ErrorMessage
                      name="schema_name"
                      component="div"
                      className="invalid-feedback"
                    />
                  </Col>
                </FormGroup>
                <FormGroup row>
                  <Label for="normal-field" md={4} className="text-md-right">
                    Name
                  </Label>
                  <Col md={7}>
                    <Field
                      name="name"
                      type="text"
                      className={
                        "form-control" +
                        (errors.name && touched.name
                          ? " is-invalid"
                          : "")
                      }
                    />
                    <ErrorMessage
                      name="name"
                      component="div"
                      className="invalid-feedback"
                    />
                  </Col>
                </FormGroup>
                <FieldArray
                  name="config"
                  render={(arrayHelpers) => (
                    <div>
                      {values.config.map((config, index) => (
                        <div key={index}>
                           <FormGroup row>
                            <Label
                              md={4}
                              className="text-md-right"
                              for="mask-date"
                            >
                              Tenant Description
                            </Label>
                            <Col md={7}>
                              <TextareaAutosize
                                rows={3}
                                name={`config.${index}.tenant_description`}
                                id="elastic-textarea"
                                type="text"
                                onReset={values.event_description}
                                placeholder="Quick description of tenant"
                                onChange={handleChange}
                                value={values.tenant_description}
                                onBlur={handleBlur}
                                className={
                                  `form-control ${s.autogrow} transition-height` +
                                  (errors.tenant_description &&
                                  touched.tenant_description
                                    ? " is-invalid"
                                    : "")
                                }
                              />
                              <ErrorMessage
                                name="tenant_description"
                                component="div"
                                className="invalid-feedback"
                              />
                            </Col>
                          </FormGroup>
                          <FormGroup row>
                            <Label
                              for="normal-field"
                              md={4}
                              className="text-md-right"
                            >
                              Date
                            </Label>
                            <Col md={7}>
                              <DatePicker    
                               name={`config[${index}]['date']`}
                               selected={getIn(values, `config[${index}] 
                                ['date']`) || ''}
                               value={getIn(values, `config[${index}] 
                                ['date']`) || ''}
                               onChange={(e) =>
                               setFieldValue(`config[${index}]['date']`, e);
                               }   
                               />
                              />
                              <ErrorMessage
                                name="date"
                                component="div"
                                className="invalid-feedback"
                              />
                            </Col>
                          </FormGroup>

                        </div>
                      ))}
                    </div>
                  )}
                />
                <div className="form-group">
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="btn btn-primary mr-2"
                  >
                    Save Tenant
                  </button>
                  <button type="reset" className="btn btn-secondary">
                    Reset
                  </button>
                </div>
              </Form>

              <Col md={7}>{JSON.stringify(values)}</Col>
            </FormGroup>
          )}
        </Formik>
      </div>
    );
  }
}

export default connect(null, { addTenant })(TenantForm);

Answer 1

如下更改您的名称、值和 onChange

  import { FieldArray, getIn } from 'formik'; 

    <DatePicker    
         name={`config[${index}]['date']`}
         selected={getIn(values, `config[${index}]['date']`) || ''}
         value={getIn(values, `config[${index}]['date']`) || ''}
         onChange={(e) =>
         setFieldValue(`config[${index}]['date']`, e);
        }   
     />

如何让 react-datepicker 更新 Formik 嵌套对象

How to have react-datepicker update Formik nested object

reactjs

datepicker

formik

react-datepicker