对antd的Input/TextArea进行一层封装，限制用
对antd的Input/TextArea进行一层封装，限制用户输入长度，并实时显示用户输入的长度，可以单独使用，也可以结合表单一起使用，LimitInput属性与antd的Input完全保持一致，暂时没有自身独特的属性；LimitTextArea只有一个额外属性sep，表示分割符，可以是个字符串，如：','，也可以是个正则表达式，如：/\n\r/，默认为''
React antd-input
npm i antd-input
Usage 例子
import React, { PureComponent, Fragment } from 'react'
import { LimitInput } from 'antd-input'
class LimitInputExample extends PureComponent {
state = {
val: ''
}
onChange = (e) => {
e.preventDefault()
this.setState({ val: e.target.value })
}
render() {
const style = {
width: '100%',
margin: '8px 0px',
textAlign: 'left',
}
return (
<Fragment>
<div style={style}>单独使用：</div>
<LimitInput
value={this.state.val}
onChange={ e => this.onChange(e) }
/>
<div style={style}>
输入内容：{this.state.val}
</div>
</Fragment>
)
}
}
import React, { PureComponent, Fragment } from 'react'
import { LimitTextArea } from 'antd-input'
class LimitTextAreaExample extends PureComponent {
state = {
val: ''
}
onChange = (e) => {
e.preventDefault()
this.setState({ val: e.target.value })
}
render() {
const style = {
width: '100%',
margin: '8px 0px',
textAlign: 'left',
}
return (
<Fragment>
<div style={style}>单独使用：</div>
<div style={style}>
<LimitTextArea
value={this.state.val}
sep={'\n'}
onChange={ e => this.onChange(e) }
placeholder={'一行一条数据'}
/>
</div>
<div style={style}>
输入内容：{this.state.val}
</div>
</Fragment>
)
}
}
Prop Types
LimitInput
属性与antd的Input完全保持一致，暂时没有自身独特的属性
| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| maxLength | 设置用户最大输入字符数，原antd的Input属性 | number | 50 | 否 |
| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| maxLength | 设置用户最大输入字符数 | number | 200 | 否 |
| sep | 分割符，可以是个字符串，如：','，也可以是个正则表达式，如：/\n\r/ | string | '' | 否 |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
