[英]Is it possible to make fields required on material-table
我正在做一個項目,我基本上使用材料表界面來做 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);
}),
}}
/>
);
}
材料表具有對驗證的本機支持,可以簡單地用於使字段成為必需的。 您所要做的就是根據此處的文檔在列規范中指定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,
},
],
});
...
ps 除非要更改,否則無需將columns
數據置於此處的狀態,這在這種情況下似乎不太可能。
@HereticMonkey 的評論基本上解決了我的問題。
制作必填字段是通過可編輯組件完成的,如 Heretic Monkey ^^ 所示的示例。
謝謝
您需要在 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);
}),
}}
/>
);
}
只需像這樣驗證和使用 Reject() (調用 reject() 保持打開行可編輯):
onRowAdd: (newData) =>
new Promise((resolve) => {
if(---!validate(newData)---) {
// alert('required');
reject();
}else{ /*addRow*/ }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.