是否可以在材料表上制作所需的字段

Question

我正在做一个项目，我基本上使用材料表界面来做 crud。我想知道有没有办法让我也可以设置必填字段？

我试过研究，但没有多少结果。请参阅下面的代码，该代码直接来自https://material-ui.com/components/tables/最后一个示例。当然，我已经修改了我的代码库供我个人使用并且一切正常，但是我不确定如果我也想要如何使字段成为必需的？如果是，我该怎么做？我会在 MaterialTable 上传递一些东西作为道具选项吗？

谢谢你的任何建议。

import React from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo() {
  const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: '?stanbul', 63: '?anl?urfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

  return (
    <MaterialTable
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      editable={{
        onRowAdd: newData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              const data = [...state.data];
              data.push(newData);
              setState({ ...state, data });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              const data = [...state.data];
              data[data.indexOf(oldData)] = newData;
              setState({ ...state, data });
            }, 600);
          }),
        onRowDelete: oldData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              const data = [...state.data];
              data.splice(data.indexOf(oldData), 1);
              setState({ ...state, data });
            }, 600);
          }),
      }}
    />
  );
}

Answer 1

材料表具有对验证的本机支持，可以简单地用于使字段成为必需的。您所要做的就是validation按照此处的文档在列规范中指定字段：https : //material-table.com/#/docs/features/validation。

这是您的代码的样子，假设您想让“姓氏”成为必需：

...
  const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      {
          title: 'Surname',
          field: 'surname',
          validate: rowData => Boolean(rowData.surname),
      },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: '?stanbul', 63: '?anl?urfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });
...

pscolumns除非要更改，否则无需将您的数据置于此处的状态，这在这种情况下似乎不太可能。

Answer 2

@HereticMonkey 的评论基本上解决了我的问题。

使字段成为必填字段是通过可编辑组件完成的，如 Heretic Monkey ^^ 所示的示例。

谢谢