打开 ExpenseEntryItemList.js 并从 redux 库导入 connect。
import { connect } from 'react-redux';
接下来，导入 Formik 库..
iimport { Formik } from 'formik';
接下来，从 router 库中导入 withRouter 方法。
import { withRouter } from "react-router-dom";
接下来，从我们的操作库中导入 addExpense。
import { addExpense } from '../actions/expenseActions';
接下来，创建具有费用初始值的构造函数。
constructor(props) {
super(props);
this.initialValues = { name: '', amount: '', spend_date: '', category: '' }
}
接下来，编写 validate 方法。
validate = (values) => {
const errors = {};
if (!values.name) {
errors.name = 'Required';
}
if (!values.amount) {
errors.amount = 'Required';
}
if (!values.spend_date) {
errors.spend_date = 'Required';
}
if (!values.category) {
errors.category = 'Required';
}
return errors;
}
接下来，添加事件处理程序方法。
handleSubmit = (values, setSubmitting) =< {
setTimeout(() =< {
let newItem = {
name: values.name,
amount: values.amount,
spendDate: values.spend_date,
category: values.category
}
this.props.addExpense(newItem);
setSubmitting(false);
this.props.history.push("/list");
}, 400);
}
这里
- 使用 addExpense 方法添加费用项
- 使用路由器历史记录方法移动到费用列表页。
接下来，使用使用 Formik 库创建的表单更新渲染方法。
render() {
return (
<div id="expenseForm">
<Formik
initialValues={this.initialValues}
validate={values => this.validate(values)}
onSubmit={(values, { setSubmitting }) => this.handleSubmit(values, setSubmitting)}>
{
({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<label for="name">Title <span>{errors.name && touched.name && errors.name}</span></label>
<input type="text" id="name" name="name" placeholder="Enter expense title"
onChange={handleChange}
onBlur={handleBlur}
value={values.name} />
<label for="amount">Amount <span>{errors.amount && touched.amount && errors.amount}</span></label>
<input type="number" id="amount" name="amount" placeholder="Enter expense amount"
onChange={handleChange}
onBlur={handleBlur}
value={values.amount} />
<label for="spend_date">Spend Date <span>{errors.spend_date && touched.spend_date && errors.spend_date}</span></label>
<input type="date" id="spend_date" name="spend_date" placeholder="Enter date"
onChange={handleChange}
onBlur={handleBlur}
value={values.spend_date} />
<label for="category">Category <span>{errors.category && touched.category && errors.category}</span></label>
<select id="category" name="category"
onChange={handleChange}
onBlur={handleBlur}
value={values.category}>
<option value="">Select</option>
<option value="Food">Food</option>
<option value="Entertainment">Entertainment</option>
<option value="Academic">Academic</option>
</select>
<input type="submit" value="Submit" disabled={isSubmitting} />
</form>
)
}
</Formik>
</div>
)
}
接下来，将 dispatch 方法映射到组件属性。
const mapDispatchToProps = {
addExpense,
};
最后，将组件连接到 store，并使用 WithRouter 包装组件，以获得对 router 链接的编程访问。
export default withRouter(connect(
null,
mapDispatchToProps
)(ExpenseEntryItemForm));
该组件的完整源代码如下 -
import React from "react";
import { connect } from 'react-redux';
import { Formik } from 'formik';
import { withRouter } from "react-router-dom";
import { addExpense } from '../actions/expenseActions';
class ExpenseEntryItemForm extends React.Component {
constructor(props) {
super(props);
this.initialValues = { name: '', amount: '', spend_date: '', category: '' }
}
validate = (values) => {
const errors = {};
if (!values.name) {
errors.name = 'Required';
}
if (!values.amount) {
errors.amount = 'Required';
}
if (!values.spend_date) {
errors.spend_date = 'Required';
}
if (!values.category) {
errors.category = 'Required';
}
return errors;
}
handleSubmit = (values, setSubmitting) => {
setTimeout(() => {
let newItem = {
name: values.name,
amount: values.amount,
spendDate: values.spend_date,
category: values.category
}
this.props.addExpense(newItem);
setSubmitting(false);
this.props.history.push("/list");
}, 400);
}
render() {
return (
<div id="expenseForm">
<Formik
initialValues={this.initialValues}
validate={values => this.validate(values)}
onSubmit={(values, { setSubmitting }) => this.handleSubmit(values, setSubmitting)}>
{
({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<label for="name">Title <span>{errors.name && touched.name && errors.name}</span></label>
<input type="text" id="name" name="name" placeholder="Enter expense title"
onChange={handleChange}
onBlur={handleBlur}
value={values.name} />
<label for="amount">Amount <span>{errors.amount && touched.amount && errors.amount}</span></label>
<input type="number" id="amount" name="amount" placeholder="Enter expense amount"
onChange={handleChange}
onBlur={handleBlur}
value={values.amount} />
<label for="spend_date">Spend Date <span>{errors.spend_date && touched.spend_date && errors.spend_date}</span></label>
<input type="date" id="spend_date" name="spend_date" placeholder="Enter date"
onChange={handleChange}
onBlur={handleBlur}
value={values.spend_date} />
<label for="category">Category <span>{errors.category && touched.category && errors.category}</span></label>
<select id="category" name="category"
onChange={handleChange}
onBlur={handleBlur}
value={values.category}>
<option value="">Select</option>
<option value="Food">Food</option>
<option value="Entertainment">Entertainment</option>
<option value="Academic">Academic</option>
</select>
<input type="submit" value="Submit" disabled={isSubmitting} />
</form>
)
}
</Formik>
</div>
)
}
}
const mapDispatchToProps = {
addExpense,
};
export default withRouter(connect(
null,
mapDispatchToProps
)(ExpenseEntryItemForm));
接下来，使用 npm 命令为应用程序提供服务。
npm start
接下来，打开浏览器并在地址栏中输入 http://localhost:3000，然后按 Enter。
最后，我们成功创建了一个具有基本功能的简单 React 应用程序。
结论
React 是最流行和强烈推荐的 UI 框架之一。正如它的受欢迎程度一样，它正在开发很长时间并积极维护。学习 React 框架对于前端开发人员来说是一个很好的起点，肯定会帮助他们提高自己的职业生涯。
