Question

我有一张表格，我想插入选择区域以填充前60％的空间，而提交按钮则填充下一个40％的空间。没有选择和按钮的大小错误，我无法弄清楚该如何做。 select自身会调整大小以匹配其输入，几乎没有大小。该按钮的大小小于其文本的大小。在这种情况下您该怎么办？

<Form layout="inline">
    <Form.Item style={{width:'60%'}}>
        {getFieldDecorator('studentId', {
            rules: [{ required: true, message: 'You must select a student' }],
        })(
            <Select style={{width:'100%'}}>
                {this.props.linkedStudents.map(x => <Select.Option value={x.id}>{x.fullName}</Select.Option>)}
            </Select>
        )}
    </Form.Item>
    <Form.Item style={{width:'30%'}}>
    <Button
        type="primary"
        htmlType="submit"
        style={{ width: '30%' }}
    >
        Remove from Team
    </Button>
    </Form.Item>
</Form>

Answer 1

您需要更改ant-form-item-control-wrapper样式。您可以通过CSS或Form.Item的{{1}}属性来实现。

要使以下内容正常工作，您需要将wrapperCol的{{1}}包装在带有Select的元素中

Form.Item

或

className="select-container"

.select-container.ant-form-item-control-wrapper { width: 100%; }指column layout，而<Form.Item wrapperCol={{ sm: 24 }} style={{ width: "60%", marginRight: 0 }}>指outline。

工作示例：https://codesandbox.io/s/w0voxxxzm5（假设您不希望选择和按钮之间有任何缝隙）

components / InlineForm.js

sm

Answer 2

style = {{width:" 60% "}} 对我有用，但最终我更喜欢使用 style = {{flex: 1}}，因为在我的例子中，我将 <InlineForm/> 划分为 3 个字段。

Simplified hooks version：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Button, Form, Select } from "antd";

const students = [
  { id: 1, fullName: "Bob Smith" },
  { id: 2, fullName: "Amber Johnson" }
];

const InlineForm = () => {
  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <Form onSubmit={handleSubmit} layout="inline">
      <Form.Item style={{ width: "60%", height: 90, margin: 0 }}>
        <Select style={{ width: "100%" }}>
          {students.map((student) => (
            <Select.Option key={student.id} value={student.id}>
              {student.fullName}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item style={{ width: "40%", marginRight: 0 }}>
        <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
          Register
        </Button>
      </Form.Item>
    </Form>
  );
};

const App = () => (
  <div>
    App using InlineForm
    <br />
    <InlineForm />
  </div>
);

ReactDOM.render(<App />, document.getElementById("container"));

儿童的Antd内联表单宽度

2 个答案: