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一致,通过声明式的组件机制来搭建丰富多彩的 ...
随机推荐
- 28.USB的传输类型
USB上必须将数据组织成 事务 才能够进行传输.事务常有两个或三个包.令牌包用于启动一个事务,由主机发送:数据包传送数据,方向由令牌包确定:握手包常是数据接收方发送的,用于表示接收数据的状态.USB协 ...
- Delphi 调试日子 - 莫名其妙的堆溢出
这个是个很有意思的事情,这一个成熟的模板上更改,同样的属性,同样的方法,新的组件在载入过程中就是报错. “Stack overflow” 因为有初始化过程,担心是不是那个地方有问题,由于是在属性赋值过 ...
- 【BZOJ 1997】[Hnoi2010]Planar
Description Input Output 找到哈密尔顿环之后找到不在哈密尔顿环上的边 这些边如果同时在里面相交那他们同时在外面也相交,所以只能一外一内,这就变成了2-SAT,判一下就好了 ...
- 结对开发----找出“水王"
一.题目 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. 如果 ...
- messager(消息窗口)
一.$.messager.alert()类似js中的alert('String') 方法参数:title, msg, icon, function(回调函数) 描述:title头部面板标题.msg主要 ...
- 遗传学详解及Matlab算法实现
遗传学算法概述 从之前转载的博客<非常好的理解遗传算法的例子>中可以知道,遗传学算法主要有6个步骤: 1. 个体编码 2. 初始群体 3. 适应度计算 4. 选择运算 5. 交叉运算 6. ...
- WWDC2014 debugging_in_xcode_6 总结
1.GCD的waiting queue 可以在Xcode左侧的面板中查看. 2.可以对View进行debug类似reveal. 3.查看运行时的对象,对于自定义对象可以实现- (id)debugQui ...
- Codeforces Round #353 (Div. 2) C Money Transfers
题目链接: http://www.codeforces.com/contest/675/problem/C 题意: 给一个数组,每个数与他相邻的数相连,第一个与最后一个相连,每个数的数值可以左右移动, ...
- bzoj 1497 最小割模型
我们可以对于消费和盈利的点建立二分图,开始答案为所有的盈利和, 那么源向消费的点连边,流量为消费值,盈利向汇连边,流量为盈利值 中间盈利对应的消费连边,流量为INF,那么我们求这张图的最小割,用 开始 ...
- hdu 3549 Flow Problem 网络流
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3549 Network flow is a well-known difficult problem f ...