react结合bootstrap实现评论功能

程序员文章站 2022-07-06 17:37:18

本文实例为大家分享了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实战教程

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

react结合bootstrap实现评论功能

react实现换肤功能的示例代码

Android仿微信实现评论功能

require.js与bootstrap结合实现简单的页面登录和页面跳转功能

React注册倒计时功能的实现

thinkPHP框架实现的无限回复评论功能示例

BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

Angular+Bootstrap+Spring Boot实现分页功能实例代码

bootstrap插件treeview实现全选父节点下所有子节点和反选功能

PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能

react.js CMS 删除功能的实现方法