标签：design3 getFieldDecorator rules required createCase 表单 Ant message true

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

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

标签：design3,getFieldDecorator,rules,required,createCase,表单,Ant,message,true
来源： https://blog.csdn.net/duansamve/article/details/118737594

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。