You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
70 lines
1.8 KiB
import React, { PureComponent } from 'react';
|
|
import { Input } from 'antd';
|
|
const { TextArea } = Input;
|
|
import './index.less';
|
|
|
|
/***
|
|
* 显示最大输入字符数
|
|
* maxLength：300（默认）
|
|
*/
|
|
class LimitTextArea extends PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
len: 0,
|
|
maxLength: 300,
|
|
isvalid: true, // 是否显示最大字符数
|
|
}
|
|
// 若需要覆盖onChange时，value必填
|
|
if (props.onChange && !props.hasOwnProperty('value')) {
|
|
this.state.isvalid = false
|
|
console.warn('LimitTextArea：绑定onChange时，value属性必填，否则显示最大输入字符数将失效!')
|
|
}
|
|
}
|
|
|
|
// 若外部定义了onChange事件，handleChange将会被覆盖
|
|
handleChange = (e) => {
|
|
const { sep } = this.props
|
|
const val = e.target.value
|
|
const arr = (val || '').split(sep)
|
|
this.setState({
|
|
len: arr.length
|
|
})
|
|
}
|
|
|
|
render () {
|
|
const { maxLength: defaultMax, isvalid } = this.state
|
|
const { sep, maxLength, value, ...restProps } = this.props
|
|
const max = maxLength > 0 ? maxLength : defaultMax
|
|
/** form组件中，value有值 */
|
|
const arr = (value || '').split(sep)
|
|
let len = value ? arr.length : this.state.len
|
|
len = len > max ? max : len
|
|
/**截取最大字符串 */
|
|
const val = arr.slice(0, len).join(sep)
|
|
const n = val ? len : 0
|
|
const suffix = `${n}/${max}`
|
|
|
|
return isvalid ? (
|
|
<div className={'block'}>
|
|
<TextArea
|
|
onChange={ e => this.handleChange(e) }
|
|
value={val}
|
|
{ ...restProps }
|
|
/>
|
|
<span className={'counter'}>{suffix}</span>
|
|
</div>
|
|
) : <TextArea { ...this.props } />
|
|
}
|
|
}
|
|
|
|
LimitTextArea.defaultProps = {
|
|
/** 分割符
|
|
* 可以是个字符串，如：'\n'
|
|
* 也可以是个正则表达式，如：/\n\r/
|
|
*/
|
|
sep: ''
|
|
}
|
|
|
|
export default LimitTextArea;
|
|
|