ReactJS - add expense

上一页
下一页

打开 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。

List Expenses

最后，我们成功创建了一个具有基本功能的简单 React 应用程序。

结论

React 是最流行和强烈推荐的 UI 框架之一。正如它的受欢迎程度一样，它正在开发很长时间并积极维护。学习 React 框架对于前端开发人员来说是一个很好的起点，肯定会帮助他们提高自己的职业生涯。

打印本页
上一页
下一页