formik表單提交后如何清除react-select值？

Question

我有一個 formik 表單，我在其中使用了 react-select 用於 select 列表。 這是我的表格：

import React from "react";

import { ErrorMessage, Field, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import Select from "react-select";


const AddBankForm = (props) => {
  return (
    <Formik
      initialValues={{
        district: props.districts,
      }}
      validationSchema={Yup.object({
        district: Yup.string().required("Required"),
      })}
      onSubmit={(values, actions) => {
    setError(null);
    setMessage(null);
    try {
      const response = await postDataWithAuth(DISTRIBUTOR_BANK_ADD, {
        routing_number: values.branch,
        bank_account_number: values.accountNumber,
        account_holder_name: values.accountName,
        pin_number: values.tpin,
      });


      // This is not working
      actions.resetForm();

      
      setMessage(response.message);
    } catch (e) {
      setError(e.response.data);
    }
    actions.setSubmitting(false);
  }}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit} autoComplete="one-time-code">
          <div className="form-row">
            <Col>
              <FormGroup>
                <label>
                  District<span className="text-danger">*</span>
                </label>
                <Select
                  menuPortalTarget={document.body}
                  type="text"
                  name="district"
                  onChange={(option) => {
                    props.updateDistrict(option.value);
                    formikProps.setFieldValue("district", option.value);
                  }}
                  options={
                    props.isCreateLiftingSuccessful ? [] : props.districts
                  }
                  onBlur={formikProps.handleBlur}
                />
                <ErrorMessage
                  name="district"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
  </div>
          <div className="form-row mt-3 text-center">
            <Col>
              <Button
                className="btn btn-success"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};

問題是在表單提交后 react-select 字段沒有被清除。 我使用了 formik 的resetForm()方法來清除我的表單。 但似乎 resetForm 方法對 react-select 字段沒有任何影響。

Answer 1

您可以使用 'ref' 道具清除反應選擇字段。

import React from "react";

import { ErrorMessage, Field, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import Select from "react-select";


const AddBankForm = (props) => {
  // update start 
  let selectRef = null;
  const clearValue = () => {
    selectRef.select.clearValue();
  };
  // update end
  return (
    <Formik
      initialValues={{
        district: props.districts,
      }}
      validationSchema={Yup.object({
        district: Yup.string().required("Required"),
      })}
      onSubmit={(values, actions) => {
    setError(null);
    setMessage(null);
    try {
      const response = await postDataWithAuth(DISTRIBUTOR_BANK_ADD, {
        routing_number: values.branch,
        bank_account_number: values.accountNumber,
        account_holder_name: values.accountName,
        pin_number: values.tpin,
      });


      // This is not working
      actions.resetForm();
      
      // Try this way
      clearValue();

      
      setMessage(response.message);
    } catch (e) {
      setError(e.response.data);
    }
    actions.setSubmitting(false);
  }}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit} autoComplete="one-time-code">
          <div className="form-row">
            <Col>
              <FormGroup>
                <label>
                  District<span className="text-danger">*</span>
                </label>
                <Select
                  // use ref
                  ref={ref => {
                    selectRef = ref;
                  }}
                  menuPortalTarget={document.body}
                  type="text"
                  name="district"
                  onChange={(option) => {
                    props.updateDistrict(option.value);
                    formikProps.setFieldValue("district", option.value);
                  }}
                  options={
                    props.isCreateLiftingSuccessful ? [] : props.districts
                  }
                  onBlur={formikProps.handleBlur}
                />
                <ErrorMessage
                  name="district"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
  </div>
          <div className="form-row mt-3 text-center">
            <Col>
              <Button
                className="btn btn-success"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};