react结合bootstrap实现评论功能

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

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

赞 (0)

相关推荐

  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析--> <div class="publish_container"> <p contenteditable

  • JavaScript评论点赞功能的实现方法

    JavaScript评论点赞功能的实现方法

    通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能 利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem

  • 使用AngularJS和PHP的Laravel实现单页评论的方法

    使用AngularJS和PHP的Laravel实现单页评论的方法

    完整代码:https://github.com/scotch-io/laravel-angular-comment-app 目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具.Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称.组合这两大框架似乎是合乎逻辑的下一步. 在我们的使用环境下,我们将使用Laravel作为后端的RESTful API,Angular作为前端,以创建一个简单的单页的评论应用. 下面是一个简单的例子,展示了

  • JS类定义原型方法的两种实现的区别评论很多

    我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗?     JScript Class:  复制代码 代码如下: function JSClass()   {        } Extends prototype method:  复制代码 代码如下: JSClass.prototype.MethodA = function()   { }; Or   复制代码 代码如下: function = JSCla

  • Vue.js实现文章评论和回复评论功能

    Vue.js实现文章评论和回复评论功能

    本来想把这个页面用jade渲染出来.评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧. 先上在线demo:http://jsbin.com/ceqifo/1/edit?js,output 再上效果图 可直接评论,点击别人的评论能回复别人的评论. html <div id="comment"> <article-content v-bind:article="article"></article-content&g

  • vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo

  • js写的评论分页(还不错)

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

  • 原生js实现回复评论功能

    实现原理 功能1.删除状态 用removeChild()方法即可 功能2.最上面的点赞 判断文字的内容是否为赞,做相应操作改变存放赞数量的容器文本内容 功能3.回复评论 创建一个新的评论添加到评论列表里 功能4.回复里的点赞 判断我是否点了赞,做相应操作 功能5.回复或者删除 判断字符串回复还是删除,做相应操作 代码用了事件代理,还有三元运算判断,减少代码量 每行代码都有详细的注释 一眼看到那么多的代码不要烦躁 其实你要把每个功能单独去看都是很简单的dom操作 一点点消化,读懂每一行代码 完整代

  • JavaScript实现简单评论功能

    JavaScript实现简单评论功能

    本文实例为大家分享了JavaScript实现简单评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024

  • react结合bootstrap实现评论功能

    本文实例为大家分享了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.j

  • Vuepress 搭建带评论功能的静态博客的实现

    vuepress 是 Vue 驱动的静态站点生成工具 本文仅介绍,搭建静态博客的过程,具体教程及文档请点击进入 vuepress中文网 点击查看项目代码 vuepress初始化 下面初始化 # 将 github 新创建的仓库克隆到本地 git clone git@github.com:zhb333/readme-blog.git # 进入项目 cd readme-blog # npm 初始化, 按照提示回车 npm init # 安装 vuepress npm i vuepress -D # 安

  • Bootstrap table右键功能实现方法

    Bootstrap table右键功能实现方法

    最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 ). 本文介绍使用contextMenu插件实现Bootstrap table右键功能. 代码(test.html): <!DOCTYPE html> <html lang="en"> <

  • Python Django使用forms来实现评论功能

    Python Django使用forms来实现评论功能

    貌似Django从版本1.6开始就放弃了对自带的comments的使用,具体原因未查,但是现在使用Django的内部的模块也可以实现评论功能,那就是借助于forms模块,下面是我的一个小例子. 环境准备  •操作系统 : windows 7 64 位旗舰版  •IDE: PyCharm 2016.1  •Python :2.7.11  •Django :1.9.6 设计 所谓设计,就是指我们将要实现的评论功能将要涉及的底层模型.我这里简单的设计如下,大家按照自己的想法,可以随意的设置,我这里的设

  • WordPress中对访客评论功能的一些优化方法

    WordPress中对访客评论功能的一些优化方法

    前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验. 今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧. 需求 细心的朋友可能已经注意到了: 当在某个 WordPress 发表评论后再次访问该 Blog, 资料就不需要再次填写, 因为它们都已经在资料输入框里面. 但没评论过的或者清除了 Cookie 之后, 资料输入框将空空如也. 1. 当访客

  • destoon实现公司新闻详细页添加评论功能的方法

    本文讲述了destoon实现公司新闻详细页添加评论功能的方法,具体步骤如下: 首先找到相应的页面: template\default\homepage\new.htm   在对应的地方添加如下代码: {if $could_comment && in_array($moduleid, explode(',', $EXT['comment_module']))} <div id="comment_div" style="display:;">

  • Android评论功能的实现过程

    Android评论功能的实现过程

    目前,各种App的社区或者用户晒照片.发说说的地方,都提供了评论功能,为了更好地学习,自己把这个功能实现了一下,做了个小的Demo. 首先推荐一款实用的插件LayoutCreater,可以帮助开发者自动生成布局代码,具体用法可以去GiHub上看看: GitHub地址:https://github.com/boredream/BorePlugin 1.新建一个Android工程,写MainActivity的布局 activity_main.xml <RelativeLayout xmlns:and

  • jQuery实现的简单无刷新评论功能示例

    jQuery实现的简单无刷新评论功能示例

    本文实例讲述了jQuery实现的简单无刷新评论功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论 - www.jb51.net</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></scr

随机推荐