React Suite InputNumber 组件

React Suite InputNumber 组件是一个实现数字输入的 React 组件，可以通过鼠标或键盘调整数字。该组件提供了丰富的配置选项，例如最小值、最大值、步长等，同时还支持文字说明及不可用状态。

安装

使用 npm 进行安装：

npm install rsuite --save

基本用法

使用 InputNumber 组件时需要传入 value 和 onChange 属性，其中 value 表示输入框中的数字，onChange 表示输入框数值变化时触发的回调函数。

import React, { useState } from 'react';
import { InputNumber } from 'rsuite';

function App() {
  const [value, setValue] = useState(0);

  function handleChange(value) {
    setValue(value);
  }

  return (
    <InputNumber value={value} onChange={handleChange} />
  );
}

配置选项

InputNumber 组件提供了多种配置选项，通过传入不同的属性值可以实现不同的效果。

最小值和最大值

使用 min 和 max 属性可以分别设置输入框所能输入的最小值和最大值。

<InputNumber min={0} max={100} value={value} onChange={handleChange} />

步长

使用 step 属性可以设置调整数字时的步长，默认为 1。

<InputNumber step={10} value={value} onChange={handleChange} />

禁用状态

使用 disabled 属性可以将 InputNumber 组件设置为禁用状态。

<InputNumber disabled value={value} onChange={handleChange} />

文字说明

使用 prefix 和 suffix 属性可以分别在输入框前后添加额外文字说明。

<InputNumber prefix="$" suffix="USD" value={value} onChange={handleChange} />

样式自定义

使用 style 属性可以自定义 InputNumber 组件的样式。

<InputNumber
  style={{ width: '200px', backgroundColor: 'lightblue' }}
  value={value}
  onChange={handleChange}
/>

API

属性

| 属性名 | 类型 | 默认值 | 说明 | | ----------- | -------------------------------- | ------ | ------------------------- | | value | number | - | 输入框中的数字 | | onChange | function(value:number) | - | 输入框数值变化时的回调函数 | | min | number | - | 输入框能输入的最小值 | | max | number | - | 输入框能输入的最大值 | | step | number | 1 | 调整数字时的步长 | | disabled | boolean | false | 是否禁用输入框 | | prefix | ReactNode／string | - | 输入框前的文字 | | suffix | ReactNode／string | - | 输入框后的文字 | | style | CSSProperties | - | 自定义样式 | | className | string | - | 自定义类名 | | decimalMark | "." | "," | - | 小数点分隔符，默认为 "." | | thousandSep | true | "." | "," | " " | "" | true | 千分位分隔符，默认为 "." |

总结

React Suite InputNumber 组件是一个实现数字输入的 React 组件。在使用时需要传入 value 和 onChange 属性，同时还可以根据需求进行多种配置选项的设置，例如最小值、最大值、步长、文字说明等。组件提供了丰富的 API，同时支持样式自定义。