以编程方式提交时显示默认的浏览器验证消息

Question

我想显示必填字段的默认浏览器验证消息，但仅在通过<button type="submit>提交时显示，而不是通过submitForm()提交时显示

到目前为止，我唯一的解决方法是document.querySelector("button[type=submit]").click()，但我认为有更好的方法可以解决此问题。

https://codesandbox.io/embed/formik-example-9v4c5

// Helper styles for demo
import "./helper.css";
import { MoreResources, DisplayFormikState } from "./helper";

import React from "react";
import { render } from "react-dom";
import { Formik } from "formik";
import * as Yup from "yup";

const App = () => (
  <div className="app">
    <Formik
      initialValues={{ email: "" }}
      onSubmit={values => {
        console.log(values);
      }}
    >
      {props => {
        return (
          <form>
            <input placeholder="Enter your email" required />
            <button type="button" onClick={() => props.submitForm()}>
              Submit (won't show validation)
            </button>
            <button type="submit">
              Submit (Displays validation msg)
            </button>
            <DisplayFormikState {...props} />
          </form>
        );
      }}
    </Formik>
  </div>
);

render(<App />, document.getElementById("root"));