防止行字段在自定义验证时重置
Prevent row fields from resetting on custom validation
我在添加新行时在 material-table
中进行了自己的验证,因此它避免了创建一个包含任何缺失字段的新行。问题是我试图阻止创建,但我希望该行不关闭,而是将其与用户写入的数据保持在可编辑状态,这样它就不会丢失。
我有点决定保持该行可编辑,但是当它验证字段时,用户输入的所有数据都会重置。
import React, { Component } from "react";
import { checkObjectLength, checkObjectKey } from "./../helpers";
import MaterialTable from "material-table";
import SnackbarNotification from "./SnackbarNotification";
class CustomTable extends Component {
state = {
open: false,
message: "",
alertStyle: "",
temporaryData: {},
columns: [
{
title: "Column1",
field: "column1",
lookup: {
1: "option1",
2: "option2",
3: "option3"
}
},
{
title: "Column2",
field: "column2",
lookup: {
10: "option1",
11: "option2",
12: "option3",
13: "option4"
}
},
{
title: "column3",
field: "column3",
lookup: {
20: "option1"
}
},
{ title: "column4", field: "column4" }
],
data: [
{
column1: "somedata",
column2: "somedata",
column3: "somedata",
column4: "somedata"
}
]
};
handleClose = () => {
this.setState({
open: false
});
};
render() {
return (
<div>
<style global="true" jsx="true">
{`
.MuiFormControl-root.MuiTextField-root {
width: 100%;
}
`}
</style>
<CustomTable
options={{
search: false,
actionsColumnIndex: 4,
filtering: true
}}
components={{
Container: props => props.children
}}
title="Search by"
columns={this.state.columns}
data={this.state.data}
editable={{
onRowAdd: newData => {
return new Promise(resolve => {
setTimeout(() => {
const data = [...this.state.data];
if (checkObjectLength(newData)) {
return this.setState({
open: true,
message: "Some fields are missing!",
alertStyle: "error",
temporaryData: newData
});
}
resolve();
data.push(newData);
this.setState({
...this.state,
data,
open: true,
message: "Successfully saved!",
alertStyle: "success"
});
}, 300);
});
},
onRowUpdate: (newData, oldData) => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
//Only checking this field since it's the only one that can be empty on edit
if (checkObjectKey(newData.value)) {
return this.setState({
open: true,
message: "Some fields are missing!",
alertStyle: "error"
});
}
data[data.indexOf(oldData)] = newData;
this.setState({
...this.state,
data,
open: true,
message: "Successfully updated!",
alertStyle: "success"
});
}, 300);
});
},
onRowDelete: oldData => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
data.splice(data.indexOf(oldData), 1);
this.setState({
...this.state,
data,
open: true,
message: "Successfully deleted!",
alertStyle: "success"
});
}, 300);
});
}
}}
/>
<SnackbarNotification
open={this.state.open}
handleClose={this.handleClose}
message={this.state.message}
alertStyle={this.state.alertStyle}
/>
</div>
);
}
}
export default CustomTable;
使用reject
使它们保持可编辑状态
onRowUpdate: (newData, oldData) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = [...this.state.data];
//Only checking this field since it's the only one that can be empty on edit
if (checkObjectKey(newData.value)) {
return reject(); // Reject when invalid
}
resolve(); // Move resolve below here
data[data.indexOf(oldData)] = newData;
this.setState({
...this.state,
data,
open: true,
message: "Successfully updated!",
alertStyle: "success"
});
}, 300);
});
},
我在添加新行时在 material-table
中进行了自己的验证,因此它避免了创建一个包含任何缺失字段的新行。问题是我试图阻止创建,但我希望该行不关闭,而是将其与用户写入的数据保持在可编辑状态,这样它就不会丢失。
我有点决定保持该行可编辑,但是当它验证字段时,用户输入的所有数据都会重置。
import React, { Component } from "react";
import { checkObjectLength, checkObjectKey } from "./../helpers";
import MaterialTable from "material-table";
import SnackbarNotification from "./SnackbarNotification";
class CustomTable extends Component {
state = {
open: false,
message: "",
alertStyle: "",
temporaryData: {},
columns: [
{
title: "Column1",
field: "column1",
lookup: {
1: "option1",
2: "option2",
3: "option3"
}
},
{
title: "Column2",
field: "column2",
lookup: {
10: "option1",
11: "option2",
12: "option3",
13: "option4"
}
},
{
title: "column3",
field: "column3",
lookup: {
20: "option1"
}
},
{ title: "column4", field: "column4" }
],
data: [
{
column1: "somedata",
column2: "somedata",
column3: "somedata",
column4: "somedata"
}
]
};
handleClose = () => {
this.setState({
open: false
});
};
render() {
return (
<div>
<style global="true" jsx="true">
{`
.MuiFormControl-root.MuiTextField-root {
width: 100%;
}
`}
</style>
<CustomTable
options={{
search: false,
actionsColumnIndex: 4,
filtering: true
}}
components={{
Container: props => props.children
}}
title="Search by"
columns={this.state.columns}
data={this.state.data}
editable={{
onRowAdd: newData => {
return new Promise(resolve => {
setTimeout(() => {
const data = [...this.state.data];
if (checkObjectLength(newData)) {
return this.setState({
open: true,
message: "Some fields are missing!",
alertStyle: "error",
temporaryData: newData
});
}
resolve();
data.push(newData);
this.setState({
...this.state,
data,
open: true,
message: "Successfully saved!",
alertStyle: "success"
});
}, 300);
});
},
onRowUpdate: (newData, oldData) => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
//Only checking this field since it's the only one that can be empty on edit
if (checkObjectKey(newData.value)) {
return this.setState({
open: true,
message: "Some fields are missing!",
alertStyle: "error"
});
}
data[data.indexOf(oldData)] = newData;
this.setState({
...this.state,
data,
open: true,
message: "Successfully updated!",
alertStyle: "success"
});
}, 300);
});
},
onRowDelete: oldData => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
data.splice(data.indexOf(oldData), 1);
this.setState({
...this.state,
data,
open: true,
message: "Successfully deleted!",
alertStyle: "success"
});
}, 300);
});
}
}}
/>
<SnackbarNotification
open={this.state.open}
handleClose={this.handleClose}
message={this.state.message}
alertStyle={this.state.alertStyle}
/>
</div>
);
}
}
export default CustomTable;
使用reject
使它们保持可编辑状态
onRowUpdate: (newData, oldData) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = [...this.state.data];
//Only checking this field since it's the only one that can be empty on edit
if (checkObjectKey(newData.value)) {
return reject(); // Reject when invalid
}
resolve(); // Move resolve below here
data[data.indexOf(oldData)] = newData;
this.setState({
...this.state,
data,
open: true,
message: "Successfully updated!",
alertStyle: "success"
});
}, 300);
});
},