React编写文本评论框
一、需求分析
二、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>属性和状态实例演示</title>
</head>
<body>
<script src="./react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var Content = React.createClass({
getInitialState: function () {
return {
inputText: "",
};
},
handleChange: function (event) {
this.setState({inputText: event.target.value});
},
handleSubmit: function () {
console.log("reply To: " + this.props.selectName + "\n" + this.state.inputText);
},
render: function () {
return <div>
<textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>
<button onClick={this.handleSubmit}>submit</button>
</div>;
},
});
var Comment = React.createClass({
getInitialState: function () {
return {
names: ["Tim", "John", "Hank"],
selectName: '',
};
},
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>
<select onChange={this.handleSelect}>
{options}
</select>
<Content selectName={this.state.selectName}></Content>
</div>;
},
});
React.render(<Comment></Comment>, document.body);
</script>
</body>
</html>
三、结果
http://files.cnblogs.com/files/shamgod/React%E5%B1%9E%E6%80%A7%E5%92%8C%E7%8A%B6%E6%80%81%E8%AF%A6%E8%A7%A3.zip
React编写文本评论框的更多相关文章
- 利用react来制作评论框
学习地址:https://my.oschina.net/leogao0816/blog/379488
- 用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
- WordPress主题开发：评论框
方法一:调出内置评论框: 文章开启评论: 页面开启评论:(注意:如果使用的是插件,点快速编辑是没有“允许评论”可勾选的) 在对应的地方,插入 <?php comments_template(); ...
- Disqus评论框改造工程-Jekyll等静态博客实现Disqus代理访问
文章最初发表于szhshp的第三边境研究所转载请注明 关于博客评论 六月多说挂了,地球人都知道. 倡言.云跟帖.来必力都很烂,地球人都知道. 转Disqus的都是人才. Disqus使用中遇到的问题 ...
- WPF自定义控件之水印文本(密码)框
首先来讲讲创建这个控件的初衷,一个让我很郁闷的问题. 公司的客户端项目采用WPF+MVVM技术实现,在近期地推客户端的过程中遇到了一个很奇葩的问题:在登录界面点击密码框就会直接闪退,没有任何提示 密码 ...
- jQuery EasyUI/TopJUI创建文本验证框（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...
- 带emoji表情弹出层的评论框，semantic+emoji picker，java.sql.SQLException: Incorrect string value: '\xF0\x9F..'
在自己做一个项目玩时,在做评论的时候. 选中了semantic.js原型,这个在国内用的不是很多,但是在github上star数量很高,想当初我想找一个js框架是就在上面找的. semantic中文网 ...
- dede5.7评论框不显示，文章页表情不显示，解决办法
dede5.7评论框不显示,文章页表情不显示,解决办法 进入dede后台,系统-系统基本参数-其它选项,找到模板引擎禁用标签,去掉里面的php,如图 进入dede模板目录,默认是/templets/d ...
- 使用JavaScript和React编写原生移动应用
使用JavaScript和React编写原生移动应用 React Native使你只使用JavaScript也能编写原生移动应用. 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的 ...
随机推荐
- 【转载】如何在FPGA设计环境中添加加时序约束
转自:http://bbs.ednchina.com/BLOG_ARTICLE_198929.HTM 如何在FPGA设计环境中加时序约束 在给FPGA做逻辑综合和布局布线时,需要在工具中设定时序 ...
- 团队项目（NABC分析）
我们团队开发的是<校园导航>软件 (1)N(Need需求) 我们的团队主要考虑到我们学校没有自己的校园导航,有时会给同学及参观人员带来不便,又看到好多学校都有自己的导航,所以就从这个需求方 ...
- C#绘制工行Logo
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- pcxFirefox 自定义
便携特性(ini设置) 把与firefox.exe同文件夹的tmemutil-sample.ini 改名为tmemutil.ini,设置如下: Portable=1 #便携式 Portable ...
- 基于AutoCAD的空间数据共享平台雏形
好久没有更新博客了,今天先透露一个新的产品——AutoMap.我自己对于这个产品的定位是“基于AutoCAD的空间数据共享平台”.用一句话来概括AutoMap的功能:为用户提供一个在AutoCAD下访 ...
- Angularjs 如何在 post 请求时去掉因 ng-repeat 产生的 $$hashkey？
序列化的时候用 angular.toJson 和 angular.fromJson ,不要用 Json.parse 和 JSON.stringify 就可以了.
- 异步解压ZIP文件
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- 最全的dedeCMS标签调用技巧和大全
1. 页面php方法获取字段 $refObj->Fields['id']; 2. 在页面上使用PHP连接数据库查询 {dede:php} $db = new DedeSql(false); $ ...
- Keil中的code关键字
一般说来,我们在C语言中定义的每一个变量初始化后都会占用一定的内存(RAM)空间.但是在keil中提供了一个特殊的关键字“code”,这个关键字在标准C中是没有的.其语法举例如下: unsigned ...
- HTTP常见返回代码（HTTP Status codes）的分类和含义
HTTP错误主要分成三类:用户设备问题.Web服务器问题和连接问题.当客户端向Web服务器发送一个HTTP请求时,服务器都会返回一个响应代码.而这些响应代码主要分成五类. HTTP状态码中定义了5大类 ...