Question

这是我的组件，其中装有AntD Form。

import React, { PureComponent } from 'react';
import { Form, Input, Button } from 'antd';
import './home-page.scss';

class HomePageContainer extends PureComponent {
  render() {
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 }
    };

    const buttonItemLayout = {
      wrapperCol: { span: 14 }
    };

    return (
      <div className='contact-company-container'>
        <div className='contact-company-card-container'>
          <div className='contact-company-card'>
            <p>some text</p>
            <p>another text</p>
            <Form layout='inline'>
              <Form.Item label='Pnone Number' {...formItemLayout}>
                <Input placeholder='+77 926 12' />
              </Form.Item>
              <Form.Item label='Email' {...formItemLayout}>
                <Input />
              </Form.Item>
              <Form.Item {...buttonItemLayout}>
                <Button>Отправить</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default HomePageContainer;

如何将两个Input和Button置于同一（水平）级别？那就是我希望他们彼此正确无间隔。

尝试将labelCol和wrapperCol都设置为{ span: 24 }，将Button留在下一行。

Answer 1

这是我目前解决的方式。基于https://ant.design/components/form上的“高级搜索”示例。

在 上方放置一个空（label）Button也许不是最佳解决方案。欢迎提出建议。

class HomePageContainer extends PureComponent {
  render() {
    const formItemLayout = {
      labelCol: { span: 24 },
      wrapperCol: { span: 24 }
    };

    const buttonItemLayout = {
      labelCol: { span: 24 },
      wrapperCol: { span: 24 }
    };

    return (
      <div className='contact-company-container'>
        <div className='contact-company-card-container'>
          <div className='contact-company-card'>
            <p>abcdef</p>
            <p>ghjklu</p>
            <Form layout='inline'>
              <Row gutter={24}>
                <Col span={8}>
                  <Form.Item label='phone' {...formItemLayout}>
                    <Input placeholder='+77 926 12' />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label='email' {...formItemLayout}>
                    <Input />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label='&nbsp;' {...buttonItemLayout}>
                    <Button>Send</Button>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

将AntD表单按钮置于与输入相同的级别

1 个答案: