Блог

Я пытаюсь реализовать операцию CRUD. Для этого я буду использовать таблицу материалов.

Как правило, я использую react-hook-формы, которые имеют проверку формы, а также могут отображать ошибки проверки на стороне сервера.

Есть ли лучший способ реализовать react-hook-формы и таблицу материалов

 import React, { useState } from "react";
import "./styles.css";
import MaterialTable from "material-table";
import TextField from "@material-ui/core/TextField";
import { useForm } from "react-hook-form";

const columns = [
  {
    title: "ID",
    field: "id"
  },
  {
    title: "Title",
    field: "title"
  }
];

export default function App() {
  const { handleSubmit, register } = useForm();
  const [data] = useState([
    {
      id: 1,
      title: "Title 1"
    },
    {
      id: 2,
      title: "Title 2"
    }
  ]);

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <MaterialTable
        columns={columns}
        data={data}
        options={{
          paging: false,
          search: false,
          draggable: false
        }}
        components={{
          EditField: ({ columnDef, value, onChange }) => (
            <TextField
              type="text"
              name={columnDef.field}
              inputRef={register({ required: true })}
              defaultValue={value}
            />
          )
        }}
        editable={{
          // This function needs to return a promise, and it does,
          // but it's always resolved, as the edit row closes
          // I need it to be rejected if validation fails
          onRowUpdate: (newData, oldData) => handleSubmit(onSubmit)()
        }}
      />
    </div>
  );
}