如何以redux格式填充日期和下拉字段的初始值?

时间:2019-11-12 13:43:07

标签: reactjs redux redux-form react-redux-form

我想在我的Edit component (_menu, date, and notes)的redux表单中填充三个字段的初始值。 Notes正确填充,而_menudate则没有填充。

我相信我正在将正确的信息传递给prop,但没有正确控制其填充时间。我正在使用Semantic UI React作为下拉组件。

ScheduleEdit.js

import ScheduleForm from "./ScheduleForm";

const ScheduleEdit = props => {
  useEffect(() => {
    props.fetchMenus();
    props.fetchSchedules();
    props.fetchSchedule(props.match.params.id);
  }, []);

  const onSubmit = formValues => {
    props.editSchedule(props.match.params.id, formValues);
  };
  const menuOptions = props.menus.map(menu => {
    return { key: menu._id, value: menu._id, text: menu.title };
  });

  const renderEdit = () => {
    if (!props.schedule || !props.menus || !props.schedules) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <h2 style={{ marginTop: 20 }}>Edit a Schedule</h2>
          <ScheduleForm
            initialValues={_.pick(props.schedule, "_menu", "date", "notes")}
            onSubmit={onSubmit}
            menuOptions={menuOptions}
          />
        </div>
      );
    }
  };

  return <div>{renderEdit()}</div>;
};

ScheduleForm.js

import { Field, reduxForm } from "redux-form";
import { Form, Dropdown } from "semantic-ui-react";

class UserForm extends React.Component {
renderInput = ({ input, label, meta }) => {
    const className = `field ${meta.error && meta.touched ? "error" : ""}`;

    return (
      <div className={className}>
        <label>{label}</label>
        <input {...input} autoComplete="off" />
        {this.renderError(meta)}
      </div>
    );
  };

  renderDatePicker = props => {
    return (
      <div>
        <label>Date</label>
        <input {...props.input} type="date" />
      </div>
    );
  };

  renderMenuPicker = props => {
    return (
      <Form.Field>
        <label>Menu</label>
        <Dropdown
          selection
          {...props.input}
          placeholder="Menu"
          fluid
          options={this.props.menuOptions}
          onChange={(param, data) => {
            props.input.onChange(data.value);
          }}
        />
      </Form.Field>
    );
  };

onSubmit = formValues => {
    this.props.onSubmit(formValues);
  };

render() {
    return (
      <form
        onSubmit={this.props.handleSubmit(this.onSubmit)}
        className="ui form error"
      >
        <Field
          name="date"
          component={this.renderDatePicker}
          label="Enter date"
        />
        <Field
          name="_menu"
          component={this.renderMenuPicker}
          label="Choose menu"
        />
        <Field name="notes" component={this.renderInput} label="Enter Note" />
        <button
          onClick={() => {
            if (!this.props.initialValues) {
              this.props.change("productsUnavailable", []);
            }
          }}
          className="ui button primary"
        >
          Submit
        </button>
      </form>
    );
  }
}

计划对象

{
  _productsUnavailable: [
    "5dc983d39395620cb84cd208"
  ],
  _id: "5dc99490afa9c30f07cb27a7",
  date: "2019-10-09T22:00:00.000Z",
  notes: "This is a test",
  _menu: {
  _menuItems: [
    "5dc7e5c7de590744c46f93da",
    "5dc983d39395620cb84cd208"
  ],
  _id: "5dc7fc9460130a4785d2a2bc",
  description: "Test",
  title: "Test",
  notes: "Test",
  __v: 0
},
__v: 0
},

0 个答案:

没有答案
相关问题