组件嵌套+Mixin函数demo
非DOM属性:1.dangerouslysetInnerHTML(xxs跨站攻击)
2.key
3.ref
编写组件嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
<!-- 定义子组件 -->
var GenderSelect= React.createClass({
render:function(){
return (
<!-- 父组件通过属性与子组件通信 -->
<select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
)
}
});
var SignupForm=React.createClass({
getInitialState:function(){
return {
name:'',
password:'',
gender:''
}
},
<!-- 子组件事件委托 -->
handleSelect:function(event){
this.setState({
gender:event.target.value
})
},
handChange:function(key,event){
var newState={}
newState[key]=event.target.value
this.setState(newState)
},
render: function(){
console.log(this.state)
return (
<form>
<input type="text" placeholder="说的什么吧" onChange={this.handChange.bind(this,'name')} />
<input type="password" onChange={this.handChange.bind(this,'password')} />
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
)
}
});
ReactDOM.render(
<SignupForm></SignupForm>,
document.getElementById('example')
);
</script>
</body>
</html>
编写简单的Mixin函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
<!-- Mixin=一组方法:1.横向抽离
2.面向切面编程,插件 -->
var BindingMixin = {
<!-- 多个函数作用相似的组件 参数key -->
changContent:function(key){
<!-- 作用域 -->
var _self=this
<!-- 函数闭包 -->
var newState={}
return function(event){
newState[key]=event.target.value
_self.setState(newState)
}
}
}
var HelloMessage=React.createClass({
<!-- 引用Mixin函数 -->
mixins:[BindingMixin],
getInitialState:function(){
return {
contentText:'',
password:''
}
},
render: function(){
return (
<form>
<input type="text" placeholder="说点什么吧" onChange={this.changContent('contentText')} />
<p>{this.state.contentText}</p>
<textarea onChange={this.changContent('password')} ></textarea>
<p>{this.state.password}</p>
</form>
)
}
});
<!-- 用于将模板转为HTML语言并插入指定的DOM节点 -->
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
组件嵌套+Mixin函数demo的更多相关文章
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- 微信开源组件WCDB漫谈及Demo
代码地址如下:http://www.demodashi.com/demo/12422.html 前言 移动端的数据库选型一直是一个难题,直到前段时间看到了WeMobileDev(微信前端团队)放出了第 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- [前端随笔][Vue] 多级菜单实现思路——组件嵌套
说在前面 本篇记录学习了vue-element-admin中的多级菜单的实现 [传送门] @vue/cli 4.2.2:vuex:scss:组件嵌套 正文 创建项目 npm create 项目名 // ...
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- React入门---组件嵌套-5
组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ...
随机推荐
- cmd 下切换目录
隔了段时间没用cmd 工作台,发现不会切换目录了,感觉特sb,为避免再次出现sb情况,记下来在说 1.切换磁盘(磁盘字母) d: 2.切换到指定目录 cd d:\www 在cmd下执行php文件 c: ...
- java中filter的用法 内部资料 请勿转载 谢谢合作
filter过滤器主要使用于前台向后台传递数据是的过滤操作.程度很简单就不说明了,直接给几个已经写好的代码: 一.使浏览器不缓存页面的过滤器 Java代码 import javax.servlet ...
- NOIP2014 day2 T2寻找道路
#include<iostream> #include<cmath> #include<cstdlib> #include<cstdio> #inclu ...
- CSS 的overflowhidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个 ...
- Flags-Ural1225简单递推
Time limit: 1.0 second Memory limit: 64 MB On the Day of the Flag of Russia a shop-owner decided to ...
- [DataBase] MongoDB (7) MongoDB 索引
MongoDB 索引 1. 建立索引 唯一索引db.passport.ensureIndex( {"loginname": 1}, {"unique": tru ...
- (4) 二叉平衡树, AVL树
1.为什么要有平衡二叉树? 上一节我们讲了一般的二叉查找树, 其期望深度为O(log2n), 其各操作的时间复杂度O(log2n)同时也是由此决定的.但是在某些情况下(如在插入的序列是有序的时候), ...
- ZJOI2007矩阵游戏
题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作: 行交 ...
- Cheatsheet: 2016 08.01 ~ 08.31
.NET Getting Started with ASP.NET Core and VS Code Coding Standard Best Practices In C# Wire – Writi ...
- Maven 配置 Selenium + testNG + reportNG 运行环境
.markdown-preview:not([data-use-github-style]) { padding: 2em; font-size: 1.2em; color: rgb(56, 58, ...