将formik与material-table集成的好方法是什么？

Question

我正在尝试将formik添加到我使用material-table构建的表中。有没有办法通过另一种方式访问​​api以将其与formik集成？

这是我正在使用的表格：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable, { FormField, MTableEditRow } from "material-table";
import { Formik, Field, getIn } from "formik";

const FormikField = props => (
  <Field
    name={props.columnDef.field}
    render={({ field, form }) => {
      const { name } = field;
      const { errors, setFieldValue } = form;

      const showError = !!getIn(errors, name);

      return (
        <FormField
          {...props}
          {...field}
          error={showError}
          onChange={newValue => setFieldValue(name, newValue)}
        />
      );
    }}
  />
);

const MuiTableEditRow = ({ onEditingApproved, ...props }) => (
  <Formik
    initialValues={props.data}
    onSubmit={newData => {
      delete newData.tableData;
      onEditingApproved(props.mode, newData, props.data);
    }}
    render={({ submitForm }) => (
      <MTableEditRow {...props} onEditingApproved={submitForm} />
    )}
  />
);

class App extends Component {
  render() {
    return (
      <MaterialTable
        data={[{ id: 1, firstName: "ax", firstName: "Baran" }]}
        columns={[
          { title: "First Name", field: "firstName" },
          { title: "Last Name", field: "lastName" }
        ]}
        editable={{
          onRowAdd: newData =>
            new Promise((resolve, reject) => {
              resolve();
            })
        }}
        components={{
          EditRow: MuiTableEditRow,
          FormField: FormikField
        }}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

看起来EditField组件可以使用formik访问该表：

以下是对上述代码的编辑：

// imports

...
const FormikMTInput = props => (
   <Field
     name={props.columnDef.field}
     render={({field, form}) => {
       const {name} = field
       const {errors, setFieldValue} = form

       const showError = !!getIn(errors, name)

       return (
         <div>
           <MTableEditField
             {...props}
             {...field}
             error={showError}
             onChange={newValue => setFieldValue(name, newValue)}
           />
           {errors[field.name] && (
             <div style={{color: "#f44336"}}>{errors[field.name]}</div>
           )}
         </div>
       )
     }}
   />
 )

...

const MuiTableEditRow = ({onEditingApproved, ...props}) => (
   <Formik
     validationSchema={courseLevelSchema} // included a validation object
     initialValues={props.data}
     onSubmit={values => {
       delete values.tableData
       onEditingApproved(props.mode, values, props.data)
     }}
     render={({submitForm}) => (
       <MTableEditRow {...props} onEditingApproved={submitForm} />
     )}
   />
 )

... 

<Material

...

 components={{
      EditRow: MuiTableEditRow,
      EditField: FormikMTInput
 }}

...

/>