Javascript 从按钮调用API

我有一个表，这里有一些属性->用户将选择几个字段，然后单击“获取帐户”按钮。之后，他将根据自己的选择得到一张新桌子

我的问题是：如何在按钮中设置调用API

我可以使用OnClick或者我可以尝试使用

我的代码：

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Table, Spin, Select, Button, Form, Checkbox } from 'antd';
import PropTypes from 'prop-types';
import { useFetch } from 'innroad.common.ui';
import * as apiService from 'services/ApiService';
import AccountType from 'components/AccountType';
import { LAYOUT, TAIL_LAYOUT } from 'constants/layouts';
import styles from './MoveProperty.scss';

const MoveProperty = ({ onSelectingItems }) => {
  const [data, isLoading, moveProperties] = useFetch(apiService.moveProperty);
  const [clients, isClientLoading] = useFetch(apiService.getAllClents);
  const [accounts] = useFetch(apiService.getAccountByAccountType);
  const [selectedAccountTypes, setSelectedItems] = useState([]);
  const handleFormFinish = (formValue) => moveProperties(formValue);

  function onChange(e) {
    console.log(`checked = ${e.target.checked}`);
  }

  console.log(selectedAccountTypes);

  return (
    <Spin spinning={isLoading}>
      <Form {...LAYOUT} onFinish={handleFormFinish}>
        <Form.Item {...TAIL_LAYOUT}>
          <Select loading={isClientLoading}>
            {clients && clients.map(({ clientId, clientName }) => (
              <Select.Option key={clientId} value={clientId} title={clientName}>{clientName}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Checkbox onChange={onChange}>Use existing Source</Checkbox>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Checkbox onChange={onChange}>Use existing merchant accounts</Checkbox>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <AccountType onSelectingItems={setSelectedItems} />
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Button htmlType="submit" className={styles.submitButton}>Search Account</Button>
          <Button type="submit" className={styles.submitButton}><Link to="/">Search Account</Link></Button>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Table
            key="id"
            bordered="true"
            rowKey="id"
            dataSource={data}
            rowSelection={{ onChange: onSelectingItems }}
            pagination={false}
          >
            <Table.Column title="Account Type" dataIndex="accountType" />
            <Table.Column title="Account Number" dataIndex="accountNumber" />
            <Table.Column title="Account ID" dataIndex="accountId" />
            <Table.Column title="Account Name" dataIndex="accountName" />
          </Table>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Button htmlType="submit" className={styles.submitButton}>Move Property</Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

MoveProperty.propTypes = {
  onSelectingItems: PropTypes.func,
};

MoveProperty.defaultProps = {
  onSelectingItems: () => { },
};

export default MoveProperty;

谁能给我解释一下我该怎么做

也许我错了。也许当用户点击按钮->将进行分页，之后将打开一个新表并调用API

但我不确定

附加屏幕：