react antd 写一个搜索表单

好的，下面是一个简单的搜索表单示例：

import React, { useState } from 'react';
import { Input, Button, Form } from 'antd';

const SearchForm = ({ onSearch }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSearch = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      onSearch(values);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form form={form} layout="inline">
      <Form.Item name="search" label="搜索">
        <Input placeholder="请输入搜索关键字" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" loading={loading} onClick={handleSearch}>
          搜索
        </Button>
      </Form.Item>
    </Form>
  );
};

export default SearchForm;

使用示例：

import React from 'react';
import SearchForm from './SearchForm';

const handleSearch = (values) => {
  console.log(values);
};

const App = () => {
  return <SearchForm onSearch={handleSearch} />;
};

export default App;

在上面的示例中，我们使用了 Ant Design 的 Input、Button 和 Form 组件，通过 form.validateFields() 方法获取表单数据，并通过 onSearch 回调函数传递给父组件。