ReactJs MaterialUi onRowUpdate字段验证
我有一个MaterialTable,我想在编辑行时验证字段。 例如,以下代码: 我有函数setNameErrorReactJs MaterialUi onRowUpdate字段验证,reactjs,material-ui,react-hooks,Reactjs,Material Ui,React Hooks,我有一个MaterialTable,我想在编辑行时验证字段。 例如,以下代码: 我有函数setNameError const [nameError, setNameError] = useState({ error: false, label: '', helperText: '', }); 然后onRowUpdate: onRowUpdate: (newData, oldData) => new
const [nameError, setNameError] = useState({
error: false,
label: '',
helperText: '',
});
然后onRowUpdate:
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if(newData.name === '') {
setNameError({
error: true,
label: 'required',
helperText: 'Required helper text'
});
reject();
return;
}
resolve();
...
}, 600);
})
我希望验证字段名是否为空,如果为空,我希望具有以下特性:
我无法显示错误标签,似乎承诺中的setNameError不起作用,我不知道如何执行此操作。发现问题
我把这些列存储在state中
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name',
editComponent: props => (
<TextField
type="text"
required={true}
error = {nameError.error}
label = {nameError.label}
helperText = {nameError.helperText}
value={props.value ? props.value : '' }
onChange={e => 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' },
},
],
data: [
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
},
],
});
解决方案是将列定义放在MaterialTable组件中:
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
...
return (
<MaterialTable
title="Editable Example"
columns= {[
{ title: 'Name', field: 'name',
editComponent: props => (
<TextField
type="text"
required={true}
error = {nameError.error}
label = {nameError.label}
helperText = {nameError.helperText}
value={props.value ? props.value : '' }
onChange={e => 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' },
},
]}
data={state.data}
...
返回(
(
props.onChange(e.target.value)}
/>
)
},
{标题:'姓',字段:'姓'},
{title:'Birth Year',字段:'Birth Year',键入:'numeric'},
{
标题:“出生地”,
字段:“出生地”,
查找:{34:'İstanbul',63:'Şanlıurfa'},
},
]}
数据={state.data}
...