reactjs - 如何从 Formik 输入值向表中添加新行？

Question

在这里，我使用通量模式和 Formik 和 yup 来处理表单。如何实现onSubmit添加数据？

import React from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'

const CommentForm = () => {
  const formik = useFormik({
    initialValues: {
      productname: '',
      quantity: '',
      price: '',
    },

    validationSchema: Yup.object({
      productname: Yup.string()
        .max(8, 'Must be 8 characters or less')
        .required('Product Name is Required'),
      quantity: Yup.string()
        .min(1, 'Must be 1 character at a minimum')
        .required('Quantity is Required'),
      price: Yup.string()
        .min(4, 'Must be enter 4 characters')
        .required('Price is required'),
    }),
    /*onSubmit: values =>{
      alert(JSON.stringify(values, null,2));
    },*/
  })
  return (
    <div>
      <h1>ADD PRODUCT</h1>
      <form onSubmit={formik.handleSubmit}>
        <div>
          <input
            type="text"
            name="productname"
            placeholder="Enter Product Name"
            onChange={formik.handleChange}
            value={formik.values.productname}
          />
          {formik.touched.productname && formik.errors.productname && (
            <span style={{ color: 'red' }}>{formik.errors.productname}</span>
          )}
        </div>
        <br />
        <br />
        <div>
          <input
            type="text"
            name="quantity"
            placeholder=" Enter Quantity"
            onChange={formik.handleChange}
            value={formik.values.quantity}
          />
          {formik.touched.quantity && formik.errors.quantity && (
            <span style={{ color: 'red' }}>{formik.errors.quantity}</span>
          )}
        </div>
        <br />
        <br />
        <div>
          <input
            type="text"
            name="price"
            placeholder="Enter Price"
            onChange={formik.handleChange}
            value={formik.values.price}
          />
          {formik.touched.price && formik.errors.price && (
            <span style={{ color: 'red' }}>{formik.errors.price}</span>
          )}
        </div>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default CommentForm

标签： reactjsformikreactjs-flux