numberInputer 数字输入框组件

渲染出一个数字输入框

特殊说明

  • 支持键盘输入
  • 支持为空显示情况
  • 通过value属性设置显示值
  • 已做异常处理及最小最大边界处理，比较特殊的情况主要是输入状态下，输入非数字字符、输入0及清空情况，通过回调方法的status和typing可以区分

安装

npm install @qnpm/q-numberInputer --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Toast } from "qunar-react-native";
import NumberInputer from '@qnpm/q-numberInputer/src';
import TextSplit from "../commonComponents/textSplit";

const CommonInputer = (props) => {
  const [
    value,
    setValue
  ] = useState('1');
  return (
    <NumberInputer
      value={value}
      onValueChanged={
        (status, value, tying) => {
          Toast.show(
            `
            status:'${status},
            'value:'${value},
            '是否输入:'${tying}
            `);
          setValue(value);
        }}
      {...props}
    />
  );
};
const renderNumberInputer = (props) => {
  return (
    <View style={styles.container}>
      <TextSplit text="正常使用，icon+键盘输入" />
      <CommonInputer />
      <TextSplit text="上限10，下限1，步长2" />
      <CommonInputer
        valueStep={2}
        minValue={1}
        maxValue={10}
      />
      <TextSplit text="不可点击" />
      <CommonInputer blockEdit />
      <TextSplit text="自定义样式" />
      <CommonInputer
        typeEnabled
        customStyle={{
          height: 60,
          fontSize: 25,
          backgroundColor: 'red'
        }}
      />
      <TextSplit text="自定义按钮" />
      <CommonInputer
        customButton={{
          addEnabledBtn: <Text>加</Text>,
          subEnabledBtn: <Text>减</Text>,
          addDisabledBtn: <Text>加</Text>,
          subDisabledBtn: <Text>减</Text>
        }}
      />
    </View>
  );
};

属性说明

属性名 类型 默认值 是否必须 说明
addDisabled boolean false false 加按钮不可用，默认可用，版本：>=0.0.8
accessibilityPreName string undefined false 无障碍标签前缀
blockEdit boolean false false 设置阻塞不可点击
customButton CustomButton undefined false 支持自定义增减按钮样式,version>=2.0.8
customStyle NumberInputerStyle undefined false 控制按钮宽高及显示值字体
maxValue number 999 false 最大值
minValue number 1 false 最小值
needScale boolean false false 是否缩放
onBlur (e: any) => void undefined false 失去焦点时回调，版本：>=0.0.8
value string `` true 受控显示的值，注意是string，方便显示，默认为最小值，必传，编辑后最终是哪个值全依赖这个属性
onFocus (e: any) => void undefined false 获取焦点时回调，版本：>=0.0.8
onValueChanged (status, value, typing) => void undefined false 回调
subDisabled boolean false false 减按钮不可用，默认可用，版本：>=0.0.8
supportNull boolean false false 支持为空状态，为true在最小值时可再减，样式上会隐藏减号和输入框，只显示一个加号
typeEnabled boolean false false 是否支持键盘输入
valueStep number 1 false 步长，默认为1，即步长开启时，不支持键盘输入

valueChange 说明

回调函数三个值代表含义：

status：当前值增减状态，枚举类型，0-4，代表：
    0：正常
    1：已小于最小值
    2：已大于最大值
    3：为空
    4：supportNull为true，并减到0时

customStyle 说明

修改按钮的样式仅支持修改height、fontSize、backgroundColor、margin相关： height: 整体成比例，要求是4的倍数，比如：20、44等

customButton 说明

注意按钮可用和不可用，须成对增加。

属性名 类型 默认值 是否必须 说明
addEnabledBtn React.ReactElement undefined false 自定义可用状态加按钮
addDisabledBtn React.ReactElement undefined false 自定义不可用状态加按钮
subEnabledBtn React.ReactElement undefined false 自定义可用状态减按钮
subDisabledBtn React.ReactElement undefined false 自定义不可用状态减按钮
NoticeItem
Popover