---
title: WKNumberInput 数字输入框
group:
  title: 表单组件
  path: /form/
---

## 何时使用

数字输入框，只允许输入数字

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="基本使用">
      <WKNumberInput value={value} onChange={handleChange} />
    </PageWrapper>
  );
};
```

## 圆角风格

```tsx
/**
 * title: 圆角风格
 * desc: 提供两种风格的样式，theme为square为方形按钮，round为圆形按钮，默认为square
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="圆角风格">
      <WKNumberInput value={value} onChange={handleChange} theme="round" />
    </PageWrapper>
  );
};
```

## 设置步长

```tsx
/**
 * title: 设置步长
 * desc: 每次改变步长，默认为1
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="设置步长">
      <WKNumberInput value={value} onChange={handleChange} step={5} />
    </PageWrapper>
  );
};
```

## 设置输入范围

```tsx
/**
 * title: 设置输入范围
 * desc: 通过min设置最小值，max设置最大值，默认min最小为0，最大为无限大
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="设置输入范围">
      <WKNumberInput value={value} onChange={handleChange} min={5} max={10} />
    </PageWrapper>
  );
};
```

## 禁用

```tsx
/**
 * title: 禁用
 * desc: 通过设置disable为true禁用所有，默认为false
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="禁用">
      <WKNumberInput value={value} onChange={handleChange} disable />
    </PageWrapper>
  );
};
```

## 禁用手动输入

```tsx
/**
 * title: 禁用手动输入
 * desc: 通过设置disableInput为true禁止手动输入，默认为false
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="禁用手动输入">
      <WKNumberInput value={value} onChange={handleChange} disableInput />
    </PageWrapper>
  );
};
```

## 禁用增加按钮

```tsx
/**
 * title: 禁用增加按钮
 * desc: 通过设置disablePlus为true禁止增加按钮的点击，默认为false
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="禁用增加按钮">
      <WKNumberInput value={value} onChange={handleChange} disablePlus />
    </PageWrapper>
  );
};
```

## 禁用减少按钮

```tsx
/**
 * title: 禁用增加按钮
 * desc: 通过设置disableMinus为true禁止增加按钮的点击，默认为false
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };
  return (
    <PageWrapper title="禁用减少按钮">
      <WKNumberInput value={value} onChange={handleChange} disableMinus />
    </PageWrapper>
  );
};
```

## 触发增加按钮事件

```tsx
/**
 * title: 触发增加按钮事件
 * desc: 自定义触发增加按钮事件
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };

  const handlePlus = (val: number) => {
    console.log('点击了增加按钮,获取当前值', val);
  };
  return (
    <PageWrapper title="触发增加按钮事件">
      <WKNumberInput value={value} onChange={handleChange} onPlus={handlePlus} />
    </PageWrapper>
  );
};
```

## 触发减少按钮事件

```tsx
/**
 * title: 触发减少按钮事件
 * desc: 自定义触发减少按钮事件
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };

  const handlePlus = (val: number) => {
    console.log('点击了减少按钮,获取当前值', val);
  };

  const handleMinus = (val: number) => {
    console.log('点击了减少按钮,获取当前值', val);
  };
  return (
    <PageWrapper title="触发减少按钮事件">
      <WKNumberInput value={value} onChange={handleChange} onMinus={handleMinus} />
    </PageWrapper>
  );
};
```

## 触发焦点/失去焦点事件

```tsx
/**
 * title: 触发焦点/失去焦点事件
 * desc: 自定义触发焦点/失去焦点事件
 */
import React, { useState } from 'react';
import { WKNumberInput } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [value, setValue] = useState(1);

  const handleChange = (val: number) => {
    setValue(val);
  };

  const handleFocus = (evt: any) => {
    console.log('触发焦点', evt);
  };

  const handleBlur = (evt: any) => {
    console.log('触发失去焦点', evt);
  };
  return (
    <PageWrapper title="触发焦点/失去焦点事件">
      <WKNumberInput value={value} onChange={handleChange} onFocus={handleFocus} onBlur={handleBlur} />
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKNumberInput/index.d.ts' ></API>
