计算 ReactJs 中 TextArea 中的字符数
Counting characters from TextArea in ReactJs
我有一些东西正在尝试在 react 中实现,这是一个简单的功能,可以计算在文本区域中键入了多少个字符。
这是源代码
var WordCount = React.createClass({
getInitialState: function() {
return{ contacts: [], fullName: "What Ever", smsBalance: 0, command: 'Send Now', charsPerPage: 160, pageCount:0 };
},
wordCount: function(e){
var currentText = e.target.value;
//Now we need to recalculate the number of characters that have been typed in so far
var characterCount = currentText.length;
var charsPerPageCount = this.state.charsPerPage;
var unitCount = Math.round(characterCount/charsPerPageCount);
this.setState({pageCount: unitCount});
},
render: function() {
return(
<div className="md-card">
<div className="user_content">
<ul className="uk-margin">
<div className="uk-margin-top">
<div className="uk-grid" data-uk-grid-margin="">
<div className="uk-width-medium-1-1">
<div className="md-input-wrapper">
<label htmlFor="Message">And Now Your Message</label>
<textarea className="md-input autosize_init" cols="30"
data-val="true"
data-val-required="The Message field is required."
id="Message" ref="Message"
rows="3" onChange={this.wordcount} style={{overflowX: "hidden", wordWrap: "break-word", height: 97+"PX"}}></textarea>
<span className="md-input-bar"></span></div>
<br/>
<span className="md-color-grey-300">
Current cost {this.state.pageCount}
</span>
</div>
</div>
</div>
</ul>
</div>
</div>
);
}
});
ReactDOM.render(<WordCount/>, document.getElementById("PageContent"))
理想情况下,我打算实现的是计算用户到目前为止在文本区域中输入的字符数,并将该数字除以某个预设值以获得页数并向用户显示用户输入的页数
但是,sate 变量 'pageCount' 永远保持为零。请问我做错了什么
问候彼得
一个愚蠢的错误,将onChange={this.wordcount}
更改为onChange={this.wordCount}
。
var yourText = this.state.yourTextArea;
yourText.split("'n").length
相关文章:
- 在JavaScript中输出转义字符
- 不同浏览器中的空白字符正则表达式行为
- Regex匹配除“”之外的所有字符;.js”;
- 当值更改时,在servlet中自动获取textarea值,无需单击按钮
- 验证Javascript中的Textarea
- 使用jQuery的TextArea字符计数器
- 将文本和html unicode字符添加到textarea元素中
- Textarea 和 MVC2 中的 IE8 特殊字符
- 计算 ReactJs 中 TextArea 中的字符数
- textarea maxlength属性没有立即计算特殊字符
- Javascript textarea每行字符限制
- JSON:处理textArea中的换行符(和其他无效的JSON字符)
- 如何在textarea HTML中限制单词,而不是字符
- 如何在按键上向textArea添加字符
- 在ie8-中模拟textarea的maxlength和日文字符
- 当在keypressup事件中按下单个键时,Textarea打印两个字符
- Angular.js textarea字符计数,排除空格和换行符计数
- 当使用textarea在图像上键入时,文本延迟一个字符
- Textarea字符计数使用JavaScript
- Textarea每行字符限制