gpt4 book ai didi

javascript - 是否可以在 Material 表上制作所需的字段

转载 作者:行者123 更新时间:2023-11-30 19:16:11 26 4
gpt4 key购买 nike

我正在做一个项目,我基本上使用 Material 表界面进行增删改查。我想知道是否有办法让我也可以将字段设置为必填字段?

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

感谢您的任何建议。

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);
}),
}}
/>
);
}

最佳答案

Material-table 具有对验证的 native 支持,可以简单地用于使字段成为必需的。您所要做的就是按照此处的文档在列规范中指定 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 数据置于此处的状态,除非它要改变,这在这种情况下似乎不太可能。

关于javascript - 是否可以在 Material 表上制作所需的字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57981242/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com