react antdesign inputNumber的使用和校验

385 阅读2分钟

一 table表格内编辑。子组件的input框处理

const EditableCell: React.FC<EditableCellProps> = ({
  editing,
  dataIndex,
  editable,
  title,
  inputType,
  record,
  children,
  ...restProps
}) => {
  // const inputNode = inputType == true ? <InputNumber /> : <Input />;
  const inputNode = inputType == true ? <Input /> : null;
  const formatAmountInput = (amount) => {
    if (amount == '--') {
      return '--'
    } else {
      return Number(amount).toLocaleString();
    }

  };

  const handeInputPrice = (e: any) => {
    // console.log('e', e.target.value)
    
  }

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[
            {
              validator: (_, value) => {
                const numericValue = parseInt(value, 10);

                  if (!isNaN(numericValue) && numericValue >=0 && numericValue < 99999999) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入大于等于0的且小于99999999的整数"));
              },
            },
          ]}
        >
          <InputNumber
            formatter={value => formatAmountInput(value)}
            parser={value => parseFloat(value.replace(/\$\s?|(,*)/g, ''))}
            controls={false}
            style={{ width: '100%' }} onBlur={handeInputPrice} />
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

说明:


//formatter指定输入框展示值的格式
//parser指定从 `formatter` 里转换回数字的方式,和 `formatter` 搭配使用
//input输入的值千分位展示,比如输入33333变成33,333
const formatAmountInput = (amount) => { 
if (amount == '--') { return '--' } 
else { 
return Number(amount).toLocaleString(); } };

二 校验数据, 是大于等于0的。 且0 能获取到校验

  // 计算第一周到第四周。输入数据处理必须大于等于0 。且0 要有校验
  const countParser = (value: any) => {
    const parsedValue: number = parseFloat(value.replace(/\$\s?|(,*)/g, '')) || 0;
    console.log(value, parsedValue);
    return parsedValue;
  }
   // 处理数据千分位分隔
  const formatAmount = (amount) => {
    if (amount == '--') {
      return '--'
    } else {
      return Number(amount).toLocaleString();
    }

  };

  // 在这里处理输入值的变化  获取全部form不为空。当前0 可获取到校验
  const handleInputChange = (changedValues, allValues) => {
    console.log(changedValues, allValues)
    const allInputValues = Object.values(allValues).every((value) => value !== undefined && value !== null && value !== '');
    console.log(allInputValues)
    if (allInputValues) {
      addTotal(allValues)
    }
  };

form表单

 <Form
      ref={formRefB}
      form={formB}
      name="source"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish2}
      onFinishFailed={onFinishFailed2}
      onValuesChange={handleInputChange}
      preserve={false}
      autoComplete="off"
    >
      <Row
        gutter={10}
        style={{
          backgroundColor: "#fff",
          marginBottom: "20px",
          padding: "15px 0",
        }}
      >
        <Col span={12}>
          <Form.Item
            label="第一周"
            name={"first_week"}
            rules={[
              {
                validator: (_, value) => {
                  if (/^[0-9]+$/.test(value)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入大于等于0的整数"));
                },
              },
            ]}
          >
            <InputNumber
              min={0}
              formatter={value => formatAmount(value)}
              parser={(value) => countParser(value)}
              addonAfter="元"
              style={{ width: "100%", textAlign: "right", }}

            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="第二周"
            name={"second_week"}
            rules={[
              {
                validator: (_, value) => {
                  if (/^[0-9]+$/.test(value)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入大于等于0的整数"));
                },
              },
            ]}
          >
            <InputNumber
              min={0}
              formatter={value => formatAmount(value)}
              parser={(value) => countParser(value)}
              addonAfter="元"
              style={{ width: "100%", textAlign: "right", }}

            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="第三周"
            name={"third_week"}
            rules={[
              {
                validator: (_, value) => {
                  if (/^[0-9]+$/.test(value)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入大于等于0的整数"));
                },
              },
            ]}
          >
            <InputNumber
              min={0}
              formatter={value => formatAmount(value)}
              parser={(value) => countParser(value)}
              addonAfter="元"
              style={{ width: "100%", textAlign: "right", }}

            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label="第四周"
            name={"fourth_week"}
            rules={[
              {
                validator: (_, value) => {
                  if (/^[0-9]+$/.test(value)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入大于等于0的整数"));
                },
              },
            ]}
          >
            <InputNumber
              min={0}
              formatter={value => formatAmount(value)}
              parser={(value) => countParser(value)}
              addonAfter="元"
              style={{ width: "100%", textAlign: "right", }}

            />
          </Form.Item>
        </Col>
        <Col
          span={24}
          style={{
            textAlign: "right",
            margin: '0px 0px 15px 0px'
          }}
        >
          <span>合计:</span><span style={{ color: 'red' }}>{parseFloat(yjData).toLocaleString()}</span></Col>
        <Col
          span={24}
          style={{
            textAlign: "right",
          }}
        >
          <Button style={{ margin: "0 8px" }} onClick={closeFormB}>
            取消
          </Button>
          <Button type="primary" onClick={handleSubmitFormB} loading={false}>
            保存
          </Button>
        </Col>
      </Row>

    </Form>

说明:现象是 。 默认input框内就是0 。

三 如果 inputNumber 默认不为0 。

说明: 因为默认大于0 ,且使用 InputNumber就是 0 ,导致 ,正则rulse不生效。 所以默认未null default 设置为空。这样可以默认走需要的逻辑

 <Col span={12} >
          <Form.Item
            label=""
            wrapperCol={{ offset: 2, span: 22 }}
            name={"reference_amount"}
            initialValue={null}
            rules={[
              {
                validator: (_, value) => {
                  const numericValue = parseInt(value, 10);
                  if (!isNaN(numericValue) && numericValue > 0 && numericValue < 99999999) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入大于0且小于99999999的整数"));
                },
              },
            ]}
          >
            <InputNumber defaultValue={''}
              formatter={value => {
                if (value == '') {
                  return ''
                } else {
                  return Number(value).toLocaleString();
                }
              }}
              parser={value => value!.replace(/\$\s?|(,*)/g, '')}
              disabled={isRefAmount}
              addonAfter="元"
              style={{ width: "100%" }}
              onChange={handleReferenceAmount}
            />
          </Form.Item>
        </Col>