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一致,通过声明式的组件机制来搭建丰富多彩的 ...
随机推荐
- Android实现KSOAP2访问WebService
Android实现KSOAP2访问WebService 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 代码实现 写一个工具类来给主界面使用,作用是使用 ...
- Qt窗体关闭时,如何自动销毁窗体类对象
Qt窗体关闭时,如何自动销毁窗体类对象 要对你的窗口设置WA_DeleteOnClose属性,默认的情况下关闭窗口仅仅意味着隐藏它 ImgWindow1->setAttribute(Qt ...
- QT 十六进制字符串转化为十六进制编码
/*************************************************Function: hexStringtoByteArray()Description: 十六进制字 ...
- OC学习笔记之属性详解和易错点
属性的概念在OC1.0中就存在,格式是定义实例变量,然后定义setter和getter方法,用点操作符操作属性 举例,类的接口部分 @interface Father : NSObject { NSI ...
- Map、Set、List、Queue、Stack的特点与用法
Collection 接口的接口 对象的集合 ├ List 子接口 按进入先后有序保存 可重复 │├ LinkedList ...
- Ngrok 内网穿透神器(转载)
mac上配置web服务: http://note.rpsh.net/posts/2013/11/27/osx-10-9-apache-server-php-mysql/ Ngrok 内网穿透神器 由于 ...
- 【Anagrams】 cpp
题目: Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will ...
- Basic knowledge of javaScript (keep for myself)
1. 函数表达式 JavaScript 函数可以通过一个表达式定义.eg. var x = function (a, b) {return a * b}; so: var x = function ( ...
- ios UI实现技巧
statusBar 移动位置 NSString *key = [[NSString alloc] initWithData:[NSData dataWithBytes:(unsigned ] enco ...
- 创建第一个MVC
创建第一个MVC(asp.net)和默认路由设置 Asp.net的MVC已经出到了4.0,我用的是visual studio2013,接下来努力学下MVC,学之前的话我建议大家先去学下三层(分别是DA ...