分类： Javascript

受控组件必须遵循特定的过程来进行表单编程。让我们检查单个输入元素要遵循的逐步过程。

创建一个表单元素。

<input type=”text” name=”username” />

为输入元素创建一个状态。

this.state = {
username:[……]

继续阅读

在现代应用程序中，开发人员会遇到很多情况，其中项目列表（例如待办事项、订单、发票等）必须以表格格式或图库格式呈现。React 提供了清晰、直观和简单的技术来创建基于列表的用户界面。React 使用两个现有功能来完成此功能。

• JavaScript 的内置map方法。
• 在 jsx 中反应表达式。

[……]

继续阅读

让我们使用新创建的组件并增强我们的ExpenseEntryItem组件。

在您喜欢的编辑器中打开我们的费用管理器应用程序。

接下来，打开ExpenseEntryItem.js文件。

接下来，导入FormattedMoney和FormattedDate。

import Form[……]

继续阅读

正如我们之前所了解的，React 组件是 React 应用程序的构建块。一个 React 组件由多个单独的组件组成。React 允许组合多个组件以创建更大的组件。此外，React 组件可以嵌套到任意级别。让我们看看如何在本章中组合 React 组件。

FormattedMoney 组件[……]

继续阅读

让我们修改ExpenseEntryItem组件并尝试使用属性。

在您喜欢的编辑器中打开我们的费用管理器应用程序。

打开src/components文件夹中的ExpenseEntryItem文件。

使用参数 props 引入构造函数。

constructor(props) {[……]

继续阅读

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

import { connect } from ‘react-redux’;

接下来，导入 Formik 库..

iimport { Formik } from ‘formik’;

接下来，[……]

继续阅读

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

import { connect } from ‘react-redux’;

接下来，导入 addExpenseList 和 deleteExpense 操作。

import { getExpens[……]

继续阅读

我们将执行以下操作来管理我们的 redux 存储。

• 通过 async fetch api 从服务器获取费用并将其设置在 Redux 存储中。
• 通过异步获取编程向服务器添加新费用，并设置在 Redux 存储中添加新费用。
• 通过 async fetch api 从服务器中删除现有费用并更新 Redux[……]

  继续阅读

该应用程序使用下面给出的第三方反应库 –

• Redux
• React Redux
• React Router
• Formik
• Redux Thunk（用于异步获取 api）

使用以下命令使用 npm 包管理器安装所有库 –

npm install –save redux react-redux[……]

继续阅读

首先，按照Http Client Programming -> Expense Rest API Server中的说明创建一个新的费用 Rest API 应用程序并启动服务器。费用服务器将在http://localhost:8000运行。

创建骨架应用程序

打开终端并转到您的工作区[……]

继续阅读