Ant design3表单一行多个组件并一齐校验

一行一个标签对应多个输入组件,这个需求很常见但在官方例子没看到合适的,因为官方建议:

注意:一个 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);

上一篇:推荐学Java——初识数据库


下一篇:[iOS开发]知乎日报第三周总结