React-Redux: получение и отправка данных формы (сервер) - PullRequest
Новая
       14

React-Redux: получение и отправка данных формы (сервер)

0 голосов
/ 31 января 2020

Прошу помощи, как сделать devextreme на редуксе. Нет плагинов: редукс-форма, формик и прочее. Мне показалось, что они будут ненужными, потому что Devextreme имеет много встроенных функций. Может быть, я ошибаюсь.

Я читал эту статью, но, возможно, есть что-то более простое https://medium.com/@pnpsegonne / tutorial-create-a-form-with-реагировать-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;

1 Ответ

1 голос
/ 04 февраля 2020

Мне нужен пример того, как получить данные с сервера в поля формы. А как их поменять и перенести на сервер, нажав на кнопку «Сохранить». Конечно, например, сервер может быть заменен на функцию тайм-аута или что-то в этом роде.

Если это единственное, что имеет значение для вас, тогда «вам может не понадобиться избыточность». Вы можете просто вызвать API в ваших componentDidMount и setState с необходимыми данными, возвращенными из API.

но, может быть, есть что-то попроще

Возможно, нет. Не волнуйтесь, со временем станет легче.

На данный момент я реализовал интеграцию API с использованием redux и redux-saga здесь . Надеюсь, это все, что вам нужно.

...