当我在表单中输入内容时,我总是变得不确定。
export class DayForm extends React.Component {
onSubmit(values) {
this.props.dispatch(saveDay(values));
return this.props.history.push("/dashboard");
};
render() {
console.log(this.props.values);
return(
<form className="day-form"
onSubmit={this.props.handleSubmit(values =>
this.onSubmit(values)
)}>
<legend class="form-title">Log Meals</legend>
<fieldset>
<div className="general-inputs">
<div className="field-container">
<label htmlFor="date">Date:</label>
<Field component={Input} type="date" name="date"
validate={[required, nonEmpty, isTrimmed]}/>
</div>
<div className="field-container">
<label htmlFor="meal1">Meal #1:</label>
<Field
component={Input}
type="text"
name="meal1"
validate={[required, nonEmpty, isTrimmed]} />
</div>
<div className="field-container">
<label htmlFor="meal2">Meal #2:</label>
<Field
component={Input}
type="text"
name="meal2"
validate={[required, nonEmpty, isTrimmed]} />
</div>
<div className="field-container">
<label htmlFor="meal3">Meal #3:</label>
<Field
component={Input}
type="text"
name="meal3"
validate={[required, nonEmpty, isTrimmed]} />
</div>
<div className="field-container">
<label htmlFor="snack">Snacks/Other:</label>
<Field
component={Input}
type="text"
name="snack"
validate={[required, nonEmpty, isTrimmed]} />
</div>
</div>
<div className="submit-btn-box">
<button
className="submit-btn"
type="submit"
disabled={this.props.pristine || this.props.submitting}>
Submit
</button>
</div>
</fieldset>
</form>
);
}
}
export default reduxForm({
form: 'dayForm',
onSubmitFail: (errors, dispatch) => dispatch(focus('date','meal1', 'meal2', 'meal3', 'snack'))
})(DayForm);
我对使用Redux还是很陌生,所以我不知道我是否在这里缺少明显的东西。我试图做的就是在此表单上获取这几项的值,然后在单独的页面上获取这些值以显示它们。如果你们都需要看到更多类似我的动作或减速器的信息,我也可以分享。
因此,我想做的是形成一种表格,其中有人记下进餐1,进餐2,进餐3和小吃。然后在另一个页面上,我希望能够获取这些进餐值。