Javascript 是否可以在物料表上设置必填字段
我在一个项目中工作，我基本上使用material table界面进行crud。我想知道是否有一种方法，如果我可以使字段需要，如果我想太多 我试过研究，但没有多少结果。请参阅下面的代码，它是上一个示例中的直接代码。当然，我已经修改了我的代码库供我个人使用，而且一切都很好，但我不确定如果我也需要，如何才能使字段成为必填字段？如果是，我将如何做？我会在MaterialTable上传递一些东西作为道具选项吗 谢谢你的建议Javascript 是否可以在物料表上设置必填字段,javascript,reactjs,ecmascript-6,material-ui,material-table,Javascript,Reactjs,Ecmascript 6,Material Ui,Material Table,我在一个项目中工作，我基本上使用material table界面进行crud。我想知道是否有一种方法，如果我可以使字段需要，如果我想太多 我试过研究，但没有多少结果。请参阅下面的代码，它是上一个示例中的直接代码。当然，我已经修改了我的代码库供我个人使用，而且一切都很好，但我不确定如果我也需要，如何才能使字段成为必填字段？如果是，我将如何做？我会在MaterialTable上传递一些东西作为道具选项吗 谢谢你的建议 import React from 'react'; import Materia
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);
}),
}}
/>
);
}
从“React”导入React；
从“物料表”导入物料表；
导出默认函数MaterialTableDemo（）{
常量[状态，设置状态]=React.useState({
栏目：[
{title:'Name'，field:'Name'}，
{标题：'姓'，字段：'姓'}，
{title:'Birth Year'，字段：'Birth Year'，键入：'numeric'}，
{
标题：“出生地”，
字段：“出生地”，
查找：{34:'İstanbul'，63:'Şanlıurfa'}，
},
],
数据：[
{姓名：'Mehmet'，姓氏：'Baran'，出生年份：1987，出生城市：63}，
{
姓名：“Zerya Betül”，
姓：“巴兰”，
出生年份：2017年，
出生城市：34，
},
],
});
返回(
新承诺（解决=>{
设置超时（（）=>{
解决（）；
const data=[…state.data]；
data.push（newData）；
setState（{…状态，数据}）；
}, 600);
}),
onRowUpdate：（新数据、旧数据）=>
新承诺（解决=>{
设置超时（（）=>{
解决（）；
const data=[…state.data]；
数据[data.indexOf（oldData）]=新数据；
setState（{…状态，数据}）；
}, 600);
}),
onRowDelete:oldData=>
新承诺（解决=>{
设置超时（（）=>{
解决（）；
const data=[…state.data]；
数据拼接（数据索引OF（旧数据），1）；
setState（{…状态，数据}）；
}, 600);
}),
}}
/>
);
}
谢谢只需像这样验证并使用Reject（）（调用Reject（）将保持打开的行可编辑）：
您需要在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);
}),
}}
/>
);
从“React”导入React；
从“物料表”中导入物料表；
从“@material ui/core/TextField”导入TextField；
导出默认函数App（）{
常量[nameError，setNameError]=React.useState({
错误：false，
标签：“，
helperText:“”，
validateInput:false，
});
const columnsHeader=[
{
标题：“姓名”，
字段：“名称”，
编辑组件：（道具）=>(
{
if（nameError.validateInput）{
setNameError({
…名称错误，
validateInput:false，
});
}
道具变化（如目标值）；
}}
/>
),
},
{标题：“姓氏”，字段：“姓氏”}，
{标题：“出生年份”，字段：“出生年份”，类型：“数字”}，
{
标题：“出生地”，
字段：“出生地”，
查阅：{34:İstanbul'，63:Şanlıurfa}，
},
{标题：“已提交”，字段：“已提交”，隐藏：true}，
];
常量[状态，设置状态]=React.useState({
数据：[
{
名称：“迈赫迈特”，
姓：“巴兰”，
出生年份：1987年，
出生城市：63，
提交：假，
},
{
姓名：“Zerya Betül”，
姓：“巴兰”，
出生年份：2017年，
出生城市：34，
提交：假，
},
],
});
返回(
新承诺（（解决、拒绝）=>{
设置超时（（）=>{
newData.submitted=true；
如果（！newData.name）{
setNameError({
错误：正确，
标签：“必需”，
helperText:“需要名称。”，
验证输入：true，
});
拒绝（）；
返回；
}
解决（）；
const data=[…state.data]；
data.push（newData）；
setState（{…状态，数据}）；
}, 600);
}),
onRowUpdate：（新数据、旧数据）=>
新承诺（（解决、拒绝）=>{
设置超时（（）=>{
newData.submitted=true；
如果（！newData.name）{
setNameError({
错误：正确，
标签：“必需”，
helperText:“需要名称。”，
验证输入：true，
});
拒绝（）；
返回；
}
解决（）；
const data=[…state.data]；
数据[data.indexOf（oldData）]=新数据；
setState（{…状态，数据}）；
}, 600);
}),
onRowDelete：（旧数据）=>
新承诺（（决议）=>{
设置超时（（）=>{
解决（）；
常数
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);
}),
}}
/>
);