处理特定字段 formik 的重置

Question

我是 React 新手，刚刚开始使用 Formik，我喜欢它使在 React 中制作表单和处理表单变得如此简单。我已经使用 formik 创建了多个自定义字段，我将我创建的反应选择字段作为示例放在这里。

import { ErrorMessage, Field } from "formik";
import React from "react";
import Select from 'react-select'

const SelectInput = (props) => {

  const { label, name, id,options, required, ...rest } = props;
  const defaultOptions = [
   {label : `Select ${label}`,value : ''} 
  ]
  const selectedOptions = options ? [...defaultOptions,...options] : defaultOptions
  return (
    <div className="mt-3">
      <label htmlFor={id ? id : name}>
        {label} {required && <span className="text-rose-500">*</span>}
      </label>
      <Field
        // className="w-full"
        name={name}
        id={id ? id : name} 
      >
          {(props) => {
          return (
            <Select
              options={selectedOptions}
              onChange={(val) => {
                props.form.setFieldValue(name, val ? val.value : null);
              }}
              onClick = {(e)=>{e.stopPropagation}}
              {...rest}
              // I want someting like onReset here
            ></Select>
          );
        }}
      </Field>
      <ErrorMessage
        name={name}
        component="div"
        className="text-xs mt-1 text-rose-500"
      />
    </div>
  );
};

export default SelectInput;

这是我用于提交表单的常用代码，您可以看到我正在使用 formik 提供的 resetForm() 方法，我想在提交方法本身中附加重置逻辑。

  const onSubmit = async (values, onSubmitProps) => {
    
    try {
      //send  request to api
      onSubmitProps.resetForm()
    } catch (error) {
      console.log(error.response.data);
    }
  };

Answer 1

如果要在表单提交后重置所选值，则需要value为Select组件提供一个控件。FormikField组件提供了valueinprops对象，因此您可以使用它。

例如：

SelectInput.js

import { ErrorMessage, Field } from 'formik';
import React from 'react';
import Select from 'react-select';

const SelectInput = ({ label, name, id, options, required, ...rest }) => {
  const defaultOptions = [{ label: `Select ${label}`, value: '' }];
  const selectedOptions = options ? [...defaultOptions, ...options] : defaultOptions;

  return (
    <div className='mt-3'>
      <label htmlFor={id ? id : name}>
        {label} {required && <span className='text-rose-500'>*</span>}
      </label>
      <Field
        // className="w-full"
        name={name}
        id={id ? id : name}
      >
        {({
          field: { value },
          form: { setFieldValue },
        }) => {
          return (
            <Select
              {...rest}
              options={selectedOptions}
              onChange={(val) => setFieldValue(name, val ? val : null)}
              onClick={(e) => e.stopPropagation()}
              value={value}
            />
          );
        }}
      </Field>
      <ErrorMessage name={name} component='div' className='text-xs mt-1 text-rose-500' />
    </div>
  );
};

export default SelectInput;

和Form.js

import { Formik, Form } from 'formik';
import SelectInput from './SelectInput';

function App() {
  return (
    <Formik
      initialValues={{
        firstName: '',
      }}
      onSubmit={async (values, { resetForm }) => {
        console.log({ values });
        resetForm();
      }}
    >
      <Form>
        <SelectInput
          name='firstName'
          label='First Name'
          options={[{ label: 'Sam', value: 'Sam' }]}
        />
        <button type='submit'>Submit</button>
      </Form>
    </Formik>
  );
}

export default App;

因此，如果单击该Submit按钮，组件中的值Select将被重置。