【react】antd-Form表单横向排布

String佳佳

已于 2023-01-14 10:07:25 修改

阅读量1.7k

点赞数

分类专栏： react 文章标签： react.js javascript 前端

于 2022-12-07 15:46:05 首次发布

本文链接：https://blog.csdn.net/weixin_44171757/article/details/128221513

版权

react 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用 Ant Design 实现的表单搜索组件，该组件通过 React 框架实现，允许用户输入多种搜索条件并进行查询操作。文章提供了具体的实现代码，包括表单布局设置、提交及重置功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

在这里插入图片描述

实现代码：

方法一：


  //------------------------------------------data
  const [form] = Form.useForm();
  const formRef = useRef();
  const itemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };
  //------------------------------------------function
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onReset = () => {
    form.resetFields();
  };
  //------------------------------------------html
        <Form form={form} ref={formRef} name="search-form" initialValues={{}} onFinish={onFinish}>
          <Row>
            <Col span={6}>
              <Form.Item name="productId" label="产品ID" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="productName" label="产品名称" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="industry" label="所属品类" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="eqType" label="设备类型" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="agreeType" label="协议类型" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="creatTime" label="创建时间" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item {...itemLayout}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>

方法二：

在这里插入图片描述