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一致,通过声明式的组件机制来搭建丰富多彩的 ...
随机推荐
- mini2440 linuxi2c驱动
#include <linux/kernel.h> #include <linux/init.h> #include <linux/module.h> #inclu ...
- 【转】matlab采样函数
dyaddown 功能:对时间序列进行二元采样,每隔一个元素提取一个元素,得到一个降采样时间序列. 格式: 1.y = dyaddown(x, EVENODD) 当EVENODD=0时,从x中第二个元 ...
- 思维认知-读mindhacks杂记
1. 导语 无意中浏览知乎,搜索到了mindhacks.cn这个个人geek的网址.mindhacks博主本人是牛人程序员一枚,但他的博客主题涵盖的主要内容确是思维改变生活. 博客链接地址:http: ...
- Windows Server 2008R2配置MySQL Cluster并将管理节点和数据节点配置成windows服务
说明:将mysql的管理节点和数据节点配置成windows服务是为了防止有人手误关闭管理节点或数据节点的dos命令窗口,管理节点或数据节点的命令窗口误关闭可能会造成mysql某台或某几台mysql不能 ...
- 委托、匿名委托和lambda表达式
1.委托 在.NET中,委托有点类似于C/C++中的函数指针,但与指针不同的是,委托是一种安全的类型,那么我们就以实现两个数的差为例,先声明一个成员方法: public int CompareTwoV ...
- android 通过工具抓包
工具: 1.tcpdump :http://www.strazzere.com/android/tcpdump 2.wireshark:http://pan.baidu.com/s/1geooiav ...
- Android ADT中增大AVD内存后无法启动：emulator failed to allocate memory 8 (转)
Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 8http://www.crifan.com/android_emulator_ ...
- [错误代码：0x80070002]IIS7及以上伪静态报错404
故障现象:DTCMS开启伪静态功能,VS2010预览正常,发布到IIS后报错404.0错误 (WIN7,WIN8,SERVER2008).模块IISWebCore通知MapRequestHandler ...
- CHtml::radioButtonList
public function getSortList(){ $arr = array(); $arr[0]['id']=0; $arr[0]['name']="否"; $arr[ ...
- Effeckt.css项目：CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...