是否可以在材料表上设置必填字段
Posted
技术标签:
【中文标题】是否可以在材料表上设置必填字段【英文标题】：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 我完全同意举个例子并进一步研究它们。谢谢你的详尽。
【参考方案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，因此在更新之前我们可以进行所有需要的验证和其他验证。以上是关于是否可以在材料表上设置必填字段的主要内容，如果未能解决你的问题，请参考以下文章