使用withFormik实现动态表单

import { withFormik } from 'formik';

const MyForm = (props) => {
  const {
    values,
    touched,
    errors,
    handleChange,
    handleBlur,
    handleSubmit,
  } = props;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.username}
      />
      {errors.username && touched.username && <div>{errors.username}</div>}

      <input
        type="password"
        name="password"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.password}
      />
      {errors.password && touched.password && <div>{errors.password}</div>}

      <button type="submit">Submit</button>
    </form>
  );
};

const EnhancedForm = withFormik({
  mapPropsToValues: () => ({ username: '', password: '' }),

  validate: (values) => {
    const errors = {};

    if (!values.username) {
      errors.username = 'Username is required';
    }

    if (!values.password) {
      errors.password = 'Password is required';
    }

    return errors;
  },

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(MyForm);

ReactDOM.render(<EnhancedForm />, document.getElementById('root'));