• form表单为什么不能提交


    常见的表单需要的校验------(必须为数字,多个ID以英文逗号或回车分隔,是否有重复,商品ID个数的限制)

                <Form.Item
                    label="商品ID"
                    name="prodId"
                    rules={[
                      { required: true, message: '请输入商品ID' },
                      { pattern: /^d[d
    ,]*d*$/, message: '商品ID是纯数字,多个ID以英文逗号或回车分隔' },
                      {
                        validator: (_, values) => {
                          const prodIdSame = values?.toString().replace(/[
    ]/g, ',');
                          const idSame = prodIdSame?.split(',');
                          if (idSame && idSame?.length !== [...new Set(idSame)].length) {
                            return Promise.reject(new Error('商品ID有重复'));
                          } if (idSame?.length > 1000) {
                            return Promise.reject(new Error('单次最多提交1000个'));
                          }
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <TextArea rows={4}  placeholder="请输入商品 ID,多个商品 ID 用英文逗号分隔,单次最多提交 1000个" disabled={isEdit} />
                  </Form.Item>
    

    这里表单有气泡框 点击气泡的弹出框才可以提交 所以 不能直接用表单的onfinish了 因此给”提交“按钮添加了onClick事件

                <Form.Item>
                    {
                      productInfo.length > 0 ? (
                        <Popconfirm
                          className="popconfirm-sty"
                          visible={showPopconfirm}
                          placement="top"
                          title={this.renderTitile}
                          onConfirm={() => this.deploy(formData)}
                          onCancel={this.handleCancel}
                          okText="确认"
                          cancelText="取消"
                        >
                          <Button type="primary" onClick={this.handleSubmit}>提交</Button>
                        </Popconfirm>
                      ) : <Button type="primary" onClick={this.handleSubmit}>提交</Button>
                    }
                  </Form.Item>
    

    这里表单提交的时候一定要用validateFields()去校验

    handleSubmit = () => {
        const { current } = this.formRef;
        current.validateFields().then((values) => {
          const { getProductInfo } = this.props;
          const { isEdit } = this.state;
          const params = getUrlkey(window.location.href);
          this.setState({
            formData: values,
          });
          const idStr = isEdit ? params.prodId : values?.prodId.split(',')[0];
          getProductInfo({ data: { prodId: idStr || params.prodId } }).then((res) => {
            if (res?.data?.length > 0) {
              this.setState({
                showPopconfirm: true,
              });
            } else {
              this.setState({
                showPopconfirm: false,
              });
            }
          });
        }).catch();
      }
    
  • 相关阅读:
    剑指offer-第五章优化时间和空间效率(从1到n的整数中1出现的次数)
    《需求工程--软件建模与分析》读书笔记05
    《需求工程--软件建模与分析》读书笔记04
    软件需求第二次课后作业
    2018年春季个人阅读计划
    软件需求与分析——大二下需会知识点
    《需求工程--软件建模与分析》读书笔记03
    《需求工程--软件建模与分析》读书笔记02
    《需求工程--软件建模与分析》读书笔记01
    学习过程总结及对教师授课给出的意见和建议
  • 原文地址:https://www.cnblogs.com/zmlAliIqsgu/p/15402222.html
Copyright © 2020-2023  润新知