---
title: 简单用法
order: 1
---

````jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, Message, Pagination} from '@alifd/next';
import {Field, FormButtonGroup, FormItemGrid, Reset, SchemaForm, Submit} from '@uform/next';
import UseFormTableHooks, {ISearchParams} from '@aligov/components-use-form-table-hooks';
import GovTable from '@aligov/components-gov-table';

const dataSource = {
  total: 55,
  list: [
    {
      name: '张三',
      age: '12'
    }, {
      name: '李四',
      age: '13'
    }]
};

const getData = (params) => {
  console.log('查询参数', params);
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(dataSource), 1000);
  })
};

function App() {
  const {
    loading,
    data = {},
    formData = {},
    search,
    reload,
    changeTable,
    updateFormData,
  } = UseFormTableHooks(getData, {
    initData: {},
  });

  const {list, total, current, pageSize} = data;

  const columns = [{
    title: '姓名',
    dataIndex: 'name'
  }, {
    title: '年龄',
    dataIndex: 'age'
  }];

  return (
    <div>
      <SchemaForm
        labelCol={6}
        wrapperCol={18}
        value={formData}
        onChange={updateFormData}
        onSubmit={search}
      >
        <FormItemGrid cols={[8, 8, 8]}>
          <Field name="name" type="string" title="姓名"></Field>
          <Field name="age" type="string" title="年龄"/>
        </FormItemGrid>
        <FormButtonGroup>
          <Submit>查询</Submit>​<Reset>重置</Reset>​
        </FormButtonGroup>
      </SchemaForm>

      <GovTable loading={loading} hasBorder={false} dataSource={list} columns={columns}/>

      <Pagination
        onChange={changeTable}
        current={current}
        total={total}
        pageSize={pageSize}
        className={'pagination'}
      />
    </div>
  );
}

ReactDOM.render((
  <App/>
), mountNode);
````