我有一个使用 React-Redux-Form 构建的表单并且需要实现并显示字符数以将输入限制为 200。我已经实现了验证,但希望在用户键入时显示字符数。
这是我的控制:
<div className="input-group">
<label>Step 2: Description of Goods *</label>
<Control.textarea
id="descriptionOfGoods"
model=".descriptionOfGoods"
name="descriptionOfGoods"
autoComplete="off"
className="form-control"
controlProps={{onKeyPress:_preventCarriageReturn}}
mapProps={{..._mapFieldClass}}
validators={{isRequired, remoteError, maxLength: (val) => maxLength(val, 200)}}
onChange={(e) => this.removeApiError(e)}
/>
<span className="tick-valid"><Icon yicon="Validation_Tick"/></span>
<span className="cross-error"><Icon yicon="X"/></span>
<Errors
id="descriptionOfGoodsErrors"
className="help-block"
model=".descriptionOfGoods"
show={{touched: true, focus: false}}
messages={{
isRequired: 'Description of goods is required.',
remoteError: validationError.descriptionOfGoods,
maxLength: 'Max characters allowed is 200'
}}
/>
</div>
有什么想法吗?
最佳答案
对于文本区域,您需要监听三个事件。一种用于 onKeyUp,一种用于 onPaste,一种用于 onCut。然后,每当这些事件之一被触发时,您就可以获取文本区域中的当前文本来确定当前长度,并使用该值来更新可以显示剩余字符数的范围。
关于javascript - React Redux Form 文本区域上的字符计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49011197/