65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 React 构建一个基本的销售应用程序

Manjunath Matathamana
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (3投票s)

2018年1月1日

CPOL

6分钟阅读

viewsIcon

17293

使用 React 构建基本销售应用程序的分步教程。

React 是一项流行的前端技术，用于构建 Web 和移动平台的应用程序和工具。在本教程中，我们将创建一个基本的销售工具应用程序，该应用程序允许您创建新订单、以表格结构查看现有订单并删除它们。您可以借鉴本教程中涵盖的思路，并将其融入您的项目中。

必备组件

本教程的所有代码都可以在下面的 codesandbox 演示中找到。或者，您可以从我的 GitHub 仓库 中 fork 它们。

我们正在构建的销售应用程序有几个依赖项——即react-router和react-table。虽然我填写了所有相关部分，但对这些包工作原理的深入解释超出了本教程的范围。

设置 React 环境

create-react-app 允许您零烦恼、零配置地快速启动您的 React 开发。使用 create-react-app 启动一个新项目，并使用 yarn/npm 安装依赖项。

$ create-react-app sales-tool

$ yarn add react-router react-router react-router-dom react-table

yarn start 以开发模式运行应用程序。

销售工具概述

始终建议对我们要构建的应用程序有一个大致的草图或视觉表示。

销售工具应用程序将包含三个组件

  1. App.js：App 组件将是销售工具的入口点。它将包含一个按钮，用于创建新订单，以及一个列出现有订单的表格。
  2. CreateOrderForm.js - CreateOrderForm 组件负责创建新订单的逻辑。
  3. OrderTable.js - OrderTable 组件以有组织的表格结构列出订单数据。

创建入口点：App 组件

应用程序的整个状态和处理状态的逻辑都驻留在 App 组件中。App 将它们作为 props 传递给 CreateOrderForm 和 OrderTable，它们是展示性组件。

这是我初始化状态的方式。this.state.order 存储在填写表单期间特定订单的状态。this.state.orderList 是通过表单提交的订单数组。

class App extends Component {

  constructor() {
    super();

    this.state = {
      order: {
        id: '',
        name : '',
        email: '',
        address: '',
        phone: '',
        units: '',
      },
     orderList: [],
    
    this.initialOrder = this.state.order;
    }
  }
  ...
}

为了管理状态，我们需要以下方法

  1. handleChange()：当订单表单中的输入控件元素的值发生更改时，会调用此方法。它接受两个参数：要更改的键和值。
  2. handleSubmit()：当用户单击提交按钮时，将执行此方法。order 对象被推送到 orderList 数组，并且 order 的 state 被清除。
  3. handleDelete()：此方法处理删除特定订单的逻辑。它接受一个参数，即要删除的对象。orderList 数组根据订单 id 进行过滤，并删除任何具有该 id 的订单实例。
  4. resetAll()：resetAll() 用于将 orderList 重置为空数组。
 handleChange(name, value) {
    this.setState(
      prevState => { 
        return(
          { 
            order: { ...prevState.order, [name]:value } 
          }
        )
      }
    )
  }

  handleSubmit() {
    this.setState(
      prevState => {
        return(
        {
          orderList: [...prevState.orderList, prevState.order],
          order: this.initialOrder
        })
      }, () => {
        this.props.history.push('/');
        
      }
    )
  }

  handleDelete(itemToBeDeleted) {
 
    let updatedOrderList = this.state.orderList.filter(function(order) 
                           { return order.id !== itemToBeDeleted.id });
    this.setState({
      orderList: updatedOrderList
    })
 }


 resetOrderList() {
    this.setState({
      orderList: []
    })
  }

就是这样！

路由应用程序

接下来是导航。当用户导航到 '/' 时，他们将在顶部看到两个按钮，以及一个显示所有订单的表格。单击“创建新订单”按钮将把用户导航到 '/new' 路径，该路径显示订单表单。

让我们为这个简单的结构添加路由。您需要从 react-router-dom 导入路由 API。

import  { Route, Switch, withRouter } from 'react-router-dom';

如下更新 App 组件的导出声明

export default withRouter(App);

withRouter 是一个高阶组件，它为您的组件添加了额外的 props。例如，您现在可以通过 this.props.history 访问 history 对象。您可以使用 this.props.history.push 将新路径推送到 history，或使用 this.props.history.location 访问当前位置。render 方法如下所示

  render() {

    return(
      <div>
       { this.props.history.location.pathname === '/'? this.renderTopButtons() : null }
        <Switch>
          <Route exact path="/" render={ () => <OrderTable {...this.props} 
                    orders = { this.state.orderList } onDelete = {this.handleDelete} /> } />
          <Route path="/new" render = { () => <CreateOrderForm {...this.props} 
                    onChange = {this.handleChange} onSubmit = {this.handleSubmit} /> } />
        </Switch>
              
      </div>
      
    );
  }
}

renderTopButton() 方法在顶部渲染按钮。

renderTopButtons() {
    return( 
      <div className = "container">
        <div className = "row col-md-8 offset-md-4   mt-4 mb-4">
          <button className = "btn btn-primary mx-2" 
           onClick = { this.props.history.push('/new'); }> Create New Order </button>
          <button className = "btn btn-danger mx-2" 
           onClick = { this.resetOrderList }> Delete All </button>
        </div>
      </div>)
  }

我们将状态数据作为 props 传递。此外，我们还为处理程序方法添加了回调，以便子组件可以更新状态。

我们在 App 组件上的工作已完成。

React 表单：创建新订单的表单

接下来，让我们填写 CreateOrderForm 组件。它是一个函数组件，显示一个表单。它使用 props 与父 App 组件通信，当表单元素的值发生更改或单击提交按钮时。

const CreateOrderForm = (props) => {
 /*  Omitted for brevity */
  return(
    <div>
        <br/>
        
        <h2> Create an Order </h2>
        <br/>
        <form onSubmit  = {handleSubmit} onChange= {handleChange} >

            <div>
              <input name="id" type="number" id="example-number-input" />
            </div>
        
            <div>
              <input name="name" type="text" id="example-text-input" />
            </div>
       
            <div>
              <input name="email" type="email" id="example-email-input" />
            </div>
     
            <div>
              <textarea name="address" cols="50" rows="3" type="address" />
            </div>
      
            <div>
              <input name="phone" type="tel" id="example-tel-input" />
            </div>
    
            <div>
             <input name="units" type="number" id="example-number-input" />
           </div>
       
           <div className="offset-md-4">
             <button type="submit"> Submit </button>
           </div>

      </form> 
    </div>
    )
}

export default CreateOrderForm;

上面的代码是实际 CreateOrderForm 组件的精简版本，已删除 CSS 样式。这里有两件重要的事情需要注意。首先，form 元素包含 onChange 和 onSubmit 事件的事件监听器，而不是单独的输入元素。

<form onSubmit  = {handleSubmit} onChange= {handleChange} >

其次，每个输入控件元素都应具有 name 属性。

 <input name="id" type="number" id="example-number-input" />

现在，您只需要定义处理程序方法 handleSubmit() 和 handleChange() 如下

 const handleSubmit = (e) => {
    e.preventDefault();
    props.onSubmit();
  }

  const handleChange = (e) => {
    const inputName = e.target.name;
    const inputValue = e.target.value;
  
    props.onChange(inputName,inputValue);
  }

显示订单数据

OrderTable 组件负责显示销售订单数据。如果您还记得，我们将 orderList 的状态和 handleDelete 方法的回调作为 props 传递下去。

<OrderTable {...this.props} orders = { this.state.orderList } onDelete = {this.handleDelete} /> } />

React-table 是在 React 中轻松创建精美表格的事实上的库。由于我们已经安装了该包，我们所需要做的就是导入 API 和样式表。

import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css'

const OrderTable = ({orders, onDelete}) => {

  }

export default OrderTable;

创建 React 表格很简单。您需要将数据和列作为 props 传递。

<ReactTable data={data} columns={columns} />

我们已经在 orders 对象中拥有要显示的数据。

const data = orders;

对于列，创建一个如下所示的列对象

const columns = [{

    Header: 'id',
    accessor: 'id',
    maxWidth: 100
  }, {
    Header: 'Name',
    accessor: 'name',

  }, {
  
    Header: 'Email',
    accessor: 'email' 
  }, {
    Header: 'Address', 
    accessor: 'address',
    width: 400
  },  {
    Header: 'Telephone', 
    accessor: 'phone'
  },  {
    Header: 'Units', 
    accessor: 'units',
    maxWidth: 150
  }]

您可以在 Header 字段中声明您希望作为列标题显示的名称。accessor 字段的值对应于数据对象中的一个键。可以通过声明列的宽度、高度等来进一步自定义列。您可以在官方文档中阅读更多相关信息。

ReactTable 组件声明的最终版本如下所示

 <ReactTable data={data} columns={columns} defaultPageSize={5} className="-striped -highlight”  />

现在我们有了一个可用的、但基本的销售工具。

删除单个订单

如果我们想要一个带有删除按钮的额外列来删除该特定订单条目，该怎么办？使用 React table，这并不难实现。添加一个具有以下值的额外列字段

  {
    Header: 'Delete', 
    accessor: 'delete',
    Cell: (row) =>( <img src="/img/delete.png" onClick={ () => { handleDelete(row.original)}}  />),
    maxWidth: 150
  }

Cell 渲染器接收一个函数。该函数渲染一个带有 onClick 事件监听器的删除按钮，用于处理删除逻辑。在上面的示例中，row 是一个 prop，row.original 包含原始行数据。

const handleDelete = (item) => {
    onDelete(item);
  }

我们都完成了。现在我们有了一个功能齐全的销售工具，可用于创建、跟踪和删除订单。

最终演示

这是我们构建的应用程序的最终演示。您可以在 CodeSandbox 上观看实时演示。

摘要

尽管销售工具应用程序可能显得微不足道，但我们在构建它时涵盖了很多内容。我们学习了 React 的基础知识，以及 React 中的两个流行第三方包——React router 和 React table。此外，我们创建了一个处理大多数 CRUD 操作的应用程序。希望您喜欢本教程。请在评论中分享您的想法。

© . All rights reserved.