温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - React-Redux: Receive and send form data (server)

javascript - React-Redux:接收和发送表单数据(服务器)

发布于 2020-04-03 23:29:31

我要求帮助如何在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;

查看更多

提问者
stiv
被浏览
22
Ansal Ali 2020-02-05 01:08

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

如果这是唯一重要的事情,那么“您可能不需要redux”。您可以只调用自己的API,componentDidMountsetState从API返回所需的数据。

但也许有更简单的东西

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

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

发布
问题

分享
好友

手机
浏览

扫码手机浏览