当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react结合bootstrap实现评论功能

react结合bootstrap实现评论功能

2020年06月23日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了react结合bootstrap实现评论功能的具体代码，供大家参考，具体内容如下

<!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>

更多教程被整理到：bootstrap基础教程 专题中，欢迎点击学习。

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：bootstrap学习教程 bootstrap实战教程

本文都是通过最简单的案例，来剖析案例中涉及到的布局要点，希望对大家的学习有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网