Question

在添加新行时，我正在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;

Answer 1

使用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);
  });
},

防止在自定义验证中重置行字段

1 个答案: