RangeNumber 区间数值

Hooks组件用 memo，或 forwardRef等高阶组件包裹后，类型就会变成 Object类型
只有 export default 导出的 Hooks，才是函数类型
在封装高阶组件时，一定要注意传入组件的类型

import React, { useState, memo } from 'react';
import { array, func } from 'prop-types';
import { InputNumber, Button } from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
const style = { marginLeft: -1, marginRight: -1 }
RangeNumber.propTypes = {
  value: array,
  onChange: func,
}
RangeNumber.defaultProps = {
  value: [],
}
function RangeNumber({value, onChange}) {
  const [state, setState] = useState(value);
  function handleChange(val, index) {
    const _state = [...state];
    _state[index] = val;
    setState(_state);
    onChange(_state);
  }
  return (
    <div className='flex'>
      <InputNumber
        min={1}
        onChange={val => handleChange(val, 0)}
        placeholder='开始时间'
        key='start'
      />
      <Button icon={<SwapRightOutlined />} style={style} />
      <InputNumber
        min={1}
        onChange={val => handleChange(val, 1)}
        placeholder='结束时间'
        key='end'
      />
    </div>
  )
}
export default memo(RangeNumber);

InputNumber整数

// 先设置最小值为0，再设置小数位数为0
<InputNumber min={0} precision={0} />