reactjs - React MaterialTable 可编辑行验证 - 如何显示和隐藏错误?
问题描述
我有一个材料表,我只想在用户单击保存按钮时对行编辑运行字段验证。
我有这个功能来设置错误:
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();
if (oldData) {
setState(prevState => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
})
我可以设置错误,问题是如果我点击取消按钮,下次我点击编辑时错误仍然可见。
这是一个gif:
我试图寻找类似onCancelEdit的事件,但我没有找到任何东西,你知道如何解决这个问题吗?
完整的 React 组件代码:
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};
export default function MaterialTableDemo() {
const [nameError, setNameError] = useState({
error: false,
label: '',
helperText: '',
});
const [state, setState] = React.useState({
data: [
{
name: 'Mehmet',
surname: 'Baran'
},
{
name: 'Zerya Betül',
surname: 'Baran'
},
],
});
return (
<MaterialTable
title="Editable Example"
columns={
[
{
title: 'Name', field: 'name',
editComponent: (props) => (
<TextField
type="text"
error={nameError.error}
helperText={nameError.helperText}
value={props.value ? props.value : ''}
onChange={e => props.onChange(e.target.value)}
/>
)
},
{ title: 'Surname', field: 'surname' }
]}
data={state.data}
icons={tableIcons}
editable={{
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (newData.name === '') {
setNameError({
error: true,
label: 'required',
helperText: 'Required helper text'
});
reject();
return;
}
resolve();
if (oldData) {
setState(prevState => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
})
}}
/>
);
}
解决方案
检查该值是否存在于editComponent
.
const [nameError, setNameError] = useState({
error: false,
label: "",
helperText: "",
validateInput: false
});
columns={[
{
title: "Name",
field: "name",
editComponent: props => (
<TextField
type="text"
error={
!props.value && nameError.validateInput
? nameError.error
: false
}
helperText={
!props.value && nameError.validateInput
? 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" }
]}
推荐阅读
- c++ - C++ nlohmann JSON 获取数组的名称
- python - 所有多线程程序都在 GPU 上运行吗?
- javascript - 在 selenium 中使用 getElementsByClassName 时,js.executeScript 不起作用
- c++ - 来自 lineEdit 的 Qt 值和来自 QCheckBox 的 isChecked 未按预期工作
- sql-server - 如何处理 SQL Server Management Studio 中的作业失败?
- angularjs - 根据范围值添加和删除活动类
- mysql - 谷歌云 SQL 未连接
- go - 缓冲通道并关闭它
- docker - 无法在 docker image microsoft/dotnet:2.1-sdk 中为 windows 架构安装节点
- vba - 排除某些列形式范围