Question

我寻求帮助，如何在redux上制作devextreme表格。没有插件：redux-form，formik等。在我看来，它们是不必要的，因为Devextreme具有许多内置功能。也许我错了。

我读了这篇文章，但是也许有一些更简单的东西 https://medium.com/@pnpsegonne/tutorial-creating-a-form-with-react-redux-c1b3025cf26b

我需要一个示例，说明如何从服务器将数据获取到表单字段中。以及如何更改它们并通过单击“保存”按钮将它们传输到服务器。当然，例如，可以将服务器替换为超时功能或其他功能。 https://codesandbox.io/s/overview-devextreme-forms-and-multi-purpose-t86mw

import React from "react";

import { employee, positions, states } from "./data.js";

import Form, {
  SimpleItem,
  GroupItem,
  ButtonItem,
  Label
} from "devextreme-react/form";
import "devextreme-react/text-area";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.birthDateOptions = { width: "100%" };
    this.positionOptions = {
      items: positions,
      value: ""
    };
    this.stateOptions = {
      items: states
    };
    this.phoneOptions = { mask: "+1 (000) 000-0000" };
    this.notesOptions = { height: 140 };
  }
  render() {
    return (
      <Form formData={employee}>
        <GroupItem cssClass="first-group" colCount={4}>
          <SimpleItem render={avatarRender} />
          <GroupItem colSpan={3}>
            <SimpleItem dataField="FirstName" />
            <SimpleItem dataField="LastName" />
            <SimpleItem
              dataField="BirthDate"
              editorType="dxDateBox"
              editorOptions={this.birthDateOptions}
            />
          </GroupItem>
        </GroupItem>
        <GroupItem cssClass="second-group" colCount={2}>
          <GroupItem>
            <SimpleItem dataField="Address" />
            <SimpleItem dataField="City" />
            <SimpleItem
              dataField="Position"
              editorType="dxSelectBox"
              editorOptions={this.positionOptions}
            />
          </GroupItem>
          <GroupItem>
            <SimpleItem
              dataField="State"
              editorType="dxSelectBox"
              editorOptions={this.stateOptions}
            />
            <SimpleItem dataField="ZipCode" />
            <SimpleItem dataField="Mobile" editorOptions={this.phoneOptions}>
              <Label text="Phone" />
            </SimpleItem>
          </GroupItem>
          <SimpleItem
            colSpan={2}
            dataField="Notes"
            editorType="dxTextArea"
            editorOptions={this.notesOptions}
          />
        </GroupItem>
        <ButtonItem
          horizontalAlignment="left"
          buttonOptions={{
            text: "Save",
            type: "success",
            useSubmitBehavior: true
          }}
        />
      </Form>
    );
  }
}

function avatarRender() {
  return <div className="form-avatar" />;
}

export default App;

Answer 1

我需要一个示例，说明如何从服务器将数据获取到表单字段中。以及如何更改它们并通过单击“保存”按钮将它们传输到服务器。当然，例如，可以将服务器替换为超时功能或其他功能。

如果这是唯一重要的事情，那么“您可能不需要redux”。您只需在componentDidMount和setState中调用API，并从API返回所需的数据即可。

但也许有些简单

也许不是。不用担心，随着时间的流逝它会变得更容易。

目前，我已经使用redux和redux-saga here实现了API集成。希望这就是您所需要的。

React-Redux：接收和发送表单数据（服务器）

1 个答案: