材质表+ Formik在React中插入行

问题描述

尝试使用Formik将行插入到我的材料表中。我认为我可以使其工作，但是使用Formik添加数据不会将tableData{id}添加到我的数据中，这与Material-table的onRowAdd功能不同。

是否有更好的方法将数据插入到材料表中？ 我在这里有一个示例工作代码：https://codesandbox.io/s/great-kowalevski-or0bu

import React,{ useState } from "react";
import { Formik,Form } from "formik";
import { Grid,TextField } from "@material-ui/core";
import MaterialTable from "material-table";
import tableIcons from "./icons";
import Inputs from "./inputs";

const App = () => {
  const initialValues = {
    name: "",age: "",email: ""
  };

  const [data,setData] = useState([
    {
      name: "Rob",age: "25",email: "[e-mail]"
    },{
      name: "John",age: "26",email: "[e-mail]"
    }
  ]);

  const [columns,setColumns] = useState([
    {
      title: "Name",field: "name",cellStyle: {
        width: 0,minWidth: 0
      }
    },{ title: "Age",field: "age" },{ title: "Email",field: "email" }
  ]);

  return (
    <div>
      <Formik
        initialValues={initialValues}
        // validationSchema={validationSchema}
        onSubmit={(values) => {
          const newValues = {
            name: values.name,age: values.age,email: values.email
          };

          new Promise((resolve,reject) => {
            setTimeout(() => {
              setData([...data,newValues]);

              resolve();
            },1000);
          });
        }}
      >
        {(props) => (
          <Form>
            <Inputs form={props} />
            <br />
            <Grid container item xs={12} justify="flex-start">
              <button type="submit" onClick={() => props.handleSubmit()}>
                Submit
              </button>
            </Grid>
            <hr />
            <MaterialTable
              title="Editable Preview"
              columns={columns}
              data={data}
              icons={tableIcons}
              editable={{
                onRowAdd: (newData) =>
                  new Promise((resolve,reject) => {
                    setTimeout(() => {
                      setData([...data,newData]);

                      resolve();
                    },1000);
                  }),onRowUpdate: (newData,oldData) =>
                  new Promise((resolve,reject) => {
                    setTimeout(() => {
                      const dataUpdate = [...data];
                      const index = oldData.tableData.id;
                      dataUpdate[index] = newData;
                      setData([...dataUpdate]);

                      resolve();
                    },onRowDelete: (oldData) =>
                  new Promise((resolve,reject) => {
                    setTimeout(() => {
                      const dataDelete = [...data];
                      const index = oldData.tableData.id;
                      dataDelete.splice(index,1);
                      setData([...dataDelete]);

                      resolve();
                    },1000);
                  })
              }}
            />
            <pre>{JSON.stringify(data,null,2)}</pre>
          </Form>
        )}
      </Formik>
    </div>
  );
};
export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）