我想在我的Edit component (_menu, date, and notes)
的redux表单中填充三个字段的初始值。 Notes
正确填充,而_menu
和date
则没有填充。
我相信我正在将正确的信息传递给prop
,但没有正确控制其填充时间。我正在使用Semantic UI React
作为下拉组件。
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>;
};
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
},