在react的一个评论组件中,大致如下的写法:
render() {
return (
<form>
<div>
<label htmlFor="username">用户名: </label>
<input
type="text"
name="username"
value={ this.state.username }
onChange={ this.handleOnChange.bind(this, 'username') }
required
></input>
</div>
<div>
<label htmlFor="commentContent">评论内容: </label>
<textarea
ref={ textarea => this.textArea = textarea }
value={this.state.commentContent}
onChange={ this.handleOnChange.bind(this, 'commentContent') }
name="commentContent"
cols="30"
rows="10"
></textarea>
</div>
<button onClick={ this.submitComment.bind(this) }>发布</button>
</form>
);
}
其中的form表单里面使用了原生button元素,神奇的是,每次发表评论后,页面会重新加载,这就很可怕了。在大佬的帮助下,debug的过程略过,结论就是:
在form表单中的button如果没有显示写明type属性为什么,则默认是为type="submit"
- 阅读剩余部分 -