---
title: InputNumber - 数字框
nav:
title: 组件
path: /client
group:
order: 1
title: Schemas
path: /client/schemas
---
# InputNumber - 数字框
## Node Tree
## Designable Bar
- InputNumber.DesignableBar
## Examples
### 数字框
```tsx
/**
* title: 数字框
*/
import React from 'react';
import { SchemaRenderer } from '../';
const schema = {
type: 'object',
properties: {
input: {
type: 'number',
title: `编辑模式`,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-reactions': {
target: 'read',
fulfill: {
state: {
value: '{{$self.value}}',
},
},
},
},
read: {
interface: 'number',
type: 'number',
title: `阅读模式`,
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
},
}
};
export default () => {
return (
);
};
```
### 百分比
```tsx
/**
* title: 百分比
*/
import React from 'react';
import { SchemaRenderer } from '../';
const schema = {
type: 'object',
properties: {
input: {
type: 'number',
title: `编辑模式`,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
placeholder: 'please enter',
addonAfter: '%',
},
'x-reactions': {
target: 'read',
fulfill: {
state: {
value: '{{$self.value}}',
},
},
},
},
read: {
type: 'number',
title: `阅读模式`,
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
placeholder: 'please enter',
addonAfter: '%',
},
},
}
};
export default () => {
return (
);
};
```
### 精度
```tsx
/**
* title: 精度
*/
import React from 'react';
import { SchemaRenderer } from '../';
const schema = {
type: 'object',
properties: {
input: {
type: 'number',
title: `编辑模式`,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
placeholder: 'please enter',
stringMode: true,
step: '0.001',
},
'x-reactions': {
target: 'read',
fulfill: {
state: {
value: '{{$self.value}}',
},
},
},
},
read: {
type: 'number',
title: `阅读模式`,
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
placeholder: 'please enter',
stringMode: true,
step: '0.001',
},
},
}
};
export default () => {
return (
);
};
```
### addonBefore 和 addonAfter 支持
```tsx
import React from 'react';
import { SchemaRenderer } from '../';
const schema = {
type: 'object',
properties: {
input: {
type: 'number',
title: `数字`,
'x-component': 'InputNumber',
'x-component-props': {
placeholder: 'please enter',
addonBefore: '前缀',
addonAfter: '后缀',
},
},
}
};
export default () => {
return (
);
};
```