让表单查询不再繁琐：用 JSX + Element-UI 封装查询组件

2023-09-24 23:51:26

前言

在前端开发中，表单查询是一个常见的需求。传统上，我们会手动编写大量的代码来实现查询功能，这不仅费时费力，而且容易出错。Element-UI 提供了一个强大的表单查询组件，可以帮助我们轻松实现复杂查询功能。本文将介绍如何使用 JSX 和 Element-UI 来封装一个简单的查询组件，让你的表单查询变得更加便捷高效。

1. 安装 Element-UI

首先，我们需要在项目中安装 Element-UI：

npm install element-ui

2. 创建 JSX 查询组件

接下来，我们创建一个 JSX 查询组件。这里我们使用一个简单的示例，展示如何查询一个名为 user 的数据模型：

import { Form, Button, Input } from 'element-ui'

const QueryForm = () => {
  return (
    <Form>
      <Form.Item label="姓名">
        <Input placeholder="请输入姓名" />
      </Form.Item>
      <Form.Item label="年龄">
        <Input placeholder="请输入年龄" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={handleSubmit}>查询</Button>
      </Form.Item>
    </Form>
  )
}

export default QueryForm

在上面的代码中，我们使用 Element-UI 的 Form、Button 和 Input 组件创建了一个简单的查询表单。其中，Form.Item 组件用于定义一个表单项，Input 组件用于输入查询条件，Button 组件用于触发查询操作。

3. 封装查询组件

为了让查询组件更加易用，我们可以将其封装成一个通用的组件。这里我们使用高阶组件的方式来实现封装：

import QueryForm from './QueryForm.jsx'

const withEncapsulation = (WrappedComponent) => {
  return (props) => {
    const { dataModel, onSubmit } = props

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

    return <WrappedComponent {...props} handleSubmit={handleSubmit} />
  }
}

const EncapsulatedQueryForm = withEncapsulation(QueryForm)

export default EncapsulatedQueryForm

在上面的代码中，我们使用 withEncapsulation 高阶组件来封装 QueryForm 组件。withEncapsulation 函数接收一个组件作为参数，并返回一个新的组件。新组件除了继承原组件的 props 之外，还额外增加了两个 props：dataModel 和 onSubmit。dataModel 是一个对象，表示查询的数据模型，onSubmit 是一个回调函数，用于处理查询提交事件。

4. 使用封装后的查询组件

封装后的查询组件可以使用起来非常简单：

import EncapsulatedQueryForm from './EncapsulatedQueryForm.jsx'

const App = () => {
  const dataModel = {
    name: '',
    age: ''
  }

  const handleSubmit = (data) => {
    console.log(data)
  }

  return (
    <EncapsulatedQueryForm dataModel={dataModel} onSubmit={handleSubmit} />
  )
}

export default App

在上面的代码中，我们创建了一个 App 组件，并使用 EncapsulatedQueryForm 组件。我们向 EncapsulatedQueryForm 组件传递了 dataModel 和 onSubmit 两个 props。当用户点击查询按钮时，onSubmit 回调函数会被触发，并携带查询数据作为参数。