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

Question

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

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

我需要一个示例来说明如何将数据从服务器获取到表单字段中。以及如何通过单击 "Save" 按钮更改它们并将它们传输到服务器。当然，比如服务器可以换成超时功能什么的。 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

I need an example of how to get data from the server into the form fields. And how to change them and transfer them to the server by click on "Save" button. Of course, for example, the server can be replaced with a timeout function or something.

如果这是您唯一关心的事情，那么 "you might not need redux"。您可以使用 API 返回的所需数据在 componentDidMount 和 setState 中调用 API。

but maybe there is something simpler

也许不是。别担心，随着时间的推移它会变得更容易。

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

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

React-Redux: Receive and send form data (server)

javascript

reactjs

devextreme