我正在尝试将 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);