// 评论框组件
var ReviewBox = React.createClass({
getInitialState: function () {
return {
rtitle: "初始化标题", //评论标题
rcontent: "",
rcontentnum:0
};
},
textChange:function (event) {
this.setState({rtitle: event.target.value});
},
textAreaChange:function (event) {
var getValue = event.target.value;
var len = getValue.length;
this.setState({rcontent:getValue, rcontentnum:len});
},
submit: function () {
alert(this.state.rtitle)
},
render: function () {
return <dl className="reviewbox">
<dt>发表评论</dt>
<dd><input type="text" value={this.state.rtitle} onChange={this.textChange} /></dd>
<dd><textarea value={this.state.rcontent} onChange={this.textAreaChange} ></textarea></dd>
<dd><span>已经输入长度为:{this.state.rcontentnum}</span></dd>
<dd><input type="button" value="提交" onClick={this.submit} /></dd>
</dl>
}
});
初识ReactJS的组件化开发(八):用表单做评论 :限制textarea可输入字符长度
最新推荐文章于 2024-02-29 10:57:39 发布