react 限制输入文本框，纯数字格式化，千分位格

react.js文本输入框，限制输入内容为数字、字母、千分位等,支持输入K、M快捷键.

npm install jsx-input --save

基本使用方式

import { Input,NumericInput,InterInput,PosInterInput,LetterInput,ThousandInput } from 'jsx-input'; <LetterInput placeholder="请输入字母" value={this.state.v} onChange={this.changeHandle.bind(this)}/> <Input value={this.state.v} ref={txt=>this.txt=txt}/> <Input multiple={true} value={this.state.v} ref={txt=>this.txt=txt}/> <InterInput className="txb" placeholder="请输入数字" value={this.state.v} /> <InterInput className="txb" negative={false} placeholder="请输入正数" value={this.state.v} /> <ThousandInput placeholder="负千分位数字" negative={true} value={this.state.v} decimals="4" onChange={this.changeHandle.bind(this)}/> <ThousandInput placeholder="千分位数字" negative={false} value={this.state.v} decimals="4" onChange={this.changeHandle.bind(this)}/> <NumericInput value="2.12" negative={true} decimals="2" onChange={this.changeHandle.bind(this)}/>

效果图如下

输入框

是否支持负数

是否为多行textarea输入框

纯数字输入框，只能输入正负整数或小数，属性decimals限制小数位数

纯字母输入框

带千分位的数字输入框，属性decimals限制小数位数

正整数输入限制

高阶组件，可以对input进行格式定制，第二个参数为格式化的正则表达式，如上面的数字输入框 InputContainer(Input,/^-?(0|[1-9][0-9]*)$/);

返回值类型,支持Number,String等

https://github.com/tianxiangbing

主要针对数字型输入的组件优化。

onChange: PropTypes.func, value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), returnType: PropTypes.string, decimals: PropTypes.number, isFormat: PropTypes.bool,//是否格式化 negative: PropTypes.bool,//是否支持负数 maxLength: PropTypes.number,//长度限制，只作整数部分的长度 delay: PropTypes.number,//事件延迟时间毫秒 xui

react xui组件一直在持续更新中，欢迎大家关注https://github.com/react-xui