一行一个标签对应多个输入组件,这个需求很常见但在官方例子没看到合适的,因为官方建议:
注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,help required validateStatus 无法自动生成。
经过摸索,证实这样写是可行的,如下:
<Form.Item
label={'模块'}
>
<Row gutter={30}>
<Col span={8}>
<Form.Item>
{getFieldDecorator('module1', {
rules: [{ required: true, message: '请输入模块1' }],
})(<Input placeholder={'请输入模块1'} />)}
</Form.Item>
</Col>
<Col span={8}>
<Form.Item>
{getFieldDecorator('module2', {
rules: [{
required: true,
// tslint:disable-next-line:max-line-length
pattern: /(^[1-9][0-9](\.\d)?$)|(^[1-9](\.\d)?$)|(^0\.\d$)/,
message: '请输入正确的模块',
}],
})(<Input placeholder={'请保留一位小数'} />)}
</Form.Item>
</Col>
</Row>
</Form.Item>
完整代码:
Test.jsx:
import React from 'react';
import { Row, Col, Form, Input, Button, Select } from 'antd';
class Test extends React.Component {
state = {
body: "",
caseType: "",
caseObject: "",
caseScripts: [],
caseNames: [],
createCaseName_visible: false
}
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
}
});
};
onTypeChange = value => {
this.setState({
caseType: value
})
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} onSubmit={this.handleSubmit}>
<Form.Item label="用例类型">
{getFieldDecorator('createCase_type', {
rules: [{ required: true, message: '请选择用例类型' }],
})(
<Select style={{ width: "100%" }} onChange={this.onTypeChange}>
<Select.Option value={0}>Shell命令</Select.Option>
<Select.Option value={1}>脚本</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item label="⽤例对象">
{getFieldDecorator('createCase_target', {
rules: [{ required: true, message: '请选择⽤例对象' }],
})(
<Select style={{ width: "100%" }}>
<Select.Option value={0}>标准计算</Select.Option>
<Select.Option value={1}>标准存储</Select.Option>
<Select.Option value={2}>标准交换</Select.Option>
<Select.Option value={3}>标准加密</Select.Option>
<Select.Option value={4}>携⾏计算</Select.Option>
<Select.Option value={5}>携⾏存储</Select.Option>
<Select.Option value={6}>携⾏交换加密</Select.Option>
<Select.Option value={7}>显控⼑⽚</Select.Option>
<Select.Option value={8}>互联线缆</Select.Option>
<Select.Option value={9}>背板</Select.Option>
<Select.Option value={10}>共享⾯板</Select.Option>
<Select.Option value={11}>标配整机</Select.Option>
<Select.Option value={12}>携⾏整机</Select.Option>
<Select.Option value={13}>测试工装</Select.Option>
<Select.Option value={14}>硬盘</Select.Option>
<Select.Option value={15}>标准服务器</Select.Option>
<Select.Option value={16}>板卡</Select.Option>
<Select.Option value={17}>标配电源</Select.Option>
<Select.Option value={18}>携行电源</Select.Option>
<Select.Option value={19}>其它</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item label="执行策略">
{getFieldDecorator('createCase_mode', {
rules: [{ required: true, message: '请选择执行策略' }],
})(
<Select style={{ width: "100%" }}>
<Select.Option value={0}>全⾃动</Select.Option>
<Select.Option value={1}>半⾃动</Select.Option>
<Select.Option value={2}>手工</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item label="执行位置">
{getFieldDecorator('createCase_exeLocation', {
rules: [{ required: true, message: '请选择执行位置' }],
})(
<Select style={{ width: "100%" }}>
<Select.Option value={0}>本地</Select.Option>
<Select.Option value={1}>远程</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item label="用例名称">
{getFieldDecorator('createCase_name', {
rules: [{ required: true, message: '请输入用例名称' }],
})(
<Input />
)}
</Form.Item>
{
Number(this.state.caseType) === 1 ? (<Form.Item label="用例参数">
{getFieldDecorator('createCase_params', {
rules: [{ required: false, message: '请输入用例参数' }],
})(
<Input placeholder="请输入用例参数" />
)}
</Form.Item>) : <></>
}
<Form.Item label="备注">
{getFieldDecorator('createCase_remarks', {
rules: [{ required: false, message: '请输入备注信息' }],
})(
<Input.TextArea placeholder="请输入备注信息" style={{ width: '100%' }} autoSize={{ minRows: 3, maxRows: 5 }}></Input.TextArea>
)}
</Form.Item>
<Form.Item
label={'模块'}
>
<Row gutter={30}>
<Col span={12}>
<Form.Item>
{getFieldDecorator('module1', {
rules: [{ required: true, message: '请输入模块1' }],
})(<Input placeholder={'请输入模块1'} />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item>
{getFieldDecorator('module2', {
rules: [{
required: true,
// tslint:disable-next-line:max-line-length
pattern: /(^[1-9][0-9](\.\d)?$)|(^[1-9](\.\d)?$)|(^0\.\d$)/,
message: '请输入正确的模块',
}],
})(<Input placeholder={'请保留一位小数'} />)}
</Form.Item>
</Col>
</Row>
</Form.Item>
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: "right", paddingBottom: 15 }}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
</div>
);
}
}
export default Form.create()(Test);