您的位置：首页 > Web前端 > React

react 学习--结合bootstrap实现评论功能

2016-10-24 15:41 405 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="js/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// 定义评论发送消息的子组件
var Content = React.createClass({
getInitialState:function () {
return {
inputText:""
}
},
handleChange:function (event) {
this.setState({
inputText:event.target.value
});
},
handleSubmit:function () {
console.log("发送给:"+this.props.selectName+",内容:"+this.state.inputText);
// 这里发送请求到后台
this.refs.comm.value = "";
},
render:function () {
return (
<div>
<textarea ref="comm" className="form-control" onChange={this.handleChange} placeholder="请输入您的评论">
</textarea>
<br/>
<button className="btn btn-primary" onClick={this.handleSubmit}>提交</button>
</div>
);
}
});
// 定义评论的组件
var Comment = React.createClass({
getInitialState:function () {
return {
names:["孔磊","肖洋","胡局新"],
selectName:"孔磊",
style:{
"width":"400px",
"margin":"0 auto"
}
};
},
handleSelect:function (event) {
this.setState({
selectName:event.target.value
});
},
render:function () {
var options = [];
for(var option in this.state.names){
options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)
};
return (
<div className="panel panel-body panel-primary" style={this.state.style}>
<div className="form-group">
<select onChange={this.handleSelect} className="form-control">
{options}
</select>
<br/>
<Content selectName={this.state.selectName}/>
</div>
</div>
);
}
});
ReactDOM.render(<Comment/>,document.getElementById("app"));
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航