ReactJS - 添加支出

上一页
下一页

打开 ExpenseEntryItemList.js 并从 redux 库导入 connect。

import { connect } from 'react-redux';

接下来，导入 Formik 库。

iimport { Formik } from 'formik';

接下来，从路由库导入 withRouter 方法。

import { withRouter } from "react-router-dom";

接下来，从我们的 action 库导入 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 方法。

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, 
};

最后，将组件连接到存储，并使用 WithRouter 包装组件以获取对路由链接的编程访问权限。

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

接下来，打开浏览器并在地址栏中输入 https://127.0.0.1:3000 并按 Enter 键。

List Expenses

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

结论

React 是最流行且强烈推荐的 UI 框架之一。与其受欢迎程度相符，它已经开发了很长时间并且得到积极维护。学习 React 框架是前端开发人员的良好起点，并且肯定有助于他们提升职业生涯。

reactjs_example.htm
打印页面
上一页
下一页
广告