--- 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 ( ); }; ```