是否可以在材料表上设置必填字段答案

【问题标题】：Is it possible to make fields required on material-table是否可以在材料表上设置必填字段
【发布时间】：2020-01-18 17:32:22
【问题描述】：

我正在做一个项目，我基本上使用材料表界面进行 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);
          }),
      }}
    />
  );
}

【问题讨论】：

documentation 有一个自定义可编辑组件的示例，显示一个简单的input，您可以在其中添加the required attribute。
@HereticMonkey 我以前看过，即使是现在，我也没有看到需要输入/字段的示例，仅用于只读但不可编辑，也许我错过了一些东西。谢谢。
正如我所提到的，将其用于自定义编辑组件。屏幕底部的最后一个。你看到了吗？看代码。它有一个属性editComponent，它显示了input 元素的使用。它有type="text"。为此，您可以将required 添加为属性（如我提供的链接所示）。 required 属性不是示例的一部分。我告诉你自己添加它。这就是编程的全部意义所在。举个例子，并与他们一起走得更远。
@HereticMonkey 我完全同意举个例子并进一步研究它们。谢谢你的详尽。

标签： javascript reactjs ecmascript-6 material-ui material-table

【解决方案1】：

Material-table 具有对验证的本机支持，可以简单地用于使字段成为必填项。您所要做的就是按照此处的文档在列规范中指定 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,
      },
    ],
  });
...

附言没有必要将您的 columns 数据放入此处，除非它会发生变化，这在这种情况下似乎不太可能。

【讨论】：

【解决方案2】：

您需要在 onRowAdd 和 onRowUpdate 上使用 editComponent、TextField 和验证处理。

请参阅下面的示例修改代码。

import React from "react";
import MaterialTable from "material-table";
import TextField from "@material-ui/core/TextField";

export default function App() {

const [nameError, setNameError] = React.useState({
    error: false,
    label: "",
    helperText: "",
    validateInput: false,
});

const columnsHeader = [
    {
        title: "Name",
        field: "name",
        editComponent: (props) => (
            <TextField
                type="text"
                error={
                    !props.value &&
                    nameError.validateInput &&
                    props.rowData.submitted
                        ? nameError.error
                        : false
                }
                helperText={
                    !props.value &&
                    nameError.validateInput &&
                    props.rowData.submitted
                        ? nameError.helperText
                        : ""
                }
                value={props.value ? props.value : ""}
                onChange={(e) => {
                    if (nameError.validateInput) {
                        setNameError({
                            ...nameError,
                            validateInput: false,
                        });
                    }

                    props.onChange(e.target.value);
                }}
            />
        ),
    },
    { title: "Surname", field: "surname" },
    { title: "Birth Year", field: "birthYear", type: "numeric" },
    {
        title: "Birth Place",
        field: "birthCity",
        lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
    },
    { title: "submitted", field: "submitted", hidden: true },
];

const [state, setState] = React.useState({
    data: [
        {
            name: "Mehmet",
            surname: "Baran",
            birthYear: 1987,
            birthCity: 63,
            submitted: false,
        },
        {
            name: "Zerya Betül",
            surname: "Baran",
            birthYear: 2017,
            birthCity: 34,
            submitted: false,
        },
    ],
});

return (
    <MaterialTable
        title="Editable Example"
        columns={columnsHeader}
        data={state.data}
        editable={{
            onRowAdd: (newData) =>
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        newData.submitted = true;
                        if (!newData.name) {
                            setNameError({
                                error: true,
                                label: "required",
                                helperText: "Name is required.",
                                validateInput: true,
                            });
                            reject();
                            return;
                        }
                        resolve();

                        const data = [...state.data];
                        data.push(newData);
                        setState({ ...state, data });
                    }, 600);
                }),
            onRowUpdate: (newData, oldData) =>
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        newData.submitted = true;
                        if (!newData.name) {
                            setNameError({
                                error: true,
                                label: "required",
                                helperText: "Name is required.",
                                validateInput: true,
                            });
                            reject();
                            return;
                        }
                        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);
                }),
        }}
    />
);

}

【讨论】：

【解决方案3】：

只需像这样验证和使用 Reject() （调用 reject() 保持打开的行可编辑）：

 onRowAdd: (newData) =>
        new Promise((resolve) => {
          if(---!validate(newData)---) {
            // alert('required');
            reject();
          }else{ /*addRow*/ }

【讨论】：

你的答案能更具体吗？请更好地描述代码。

【解决方案4】：

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

通过可编辑组件完成所需字段的设置，如 Heretic Monkey ^^ 所示的示例。

谢谢

【讨论】：

我认为我们可以在编辑中使用 formik，因此在更新之前我们可以进行所有需要的验证和其他验证。