react组件传值传方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Txt extends React.Component{
constructor(props){
super(props);
this.Input = this.Input.bind(this);
}
Input(e){
if(e.keyCode===13){
this.props.addItem(e.target.value);
// e.target.value = '';
// this.refs.wbk.value = '';
this.jd.value = '';
}
}
render(){
console.log(this)
// 官方推荐 将文本框的值挂载到函数实例上储存起来 很react的做法
return (
// <input type='text' onKeyUp={this.Input} ref='wbk'/>
<input type='text' onKeyUp={this.Input} ref={(wb)=>this.jd=wb}/>
)
}
}
class List extends React.Component{
constructor(props){
super(props);
};
render(){
let {data:list} = this.props;
return(
// 这里绑定的this没有作用，只是为了返回一个没有立即执行的方法
<ul>
{
list.map((item,index)=>{
return <li key={index} style={{background:index===1?'red':'skyblue'}}>
{item}
<button onClick={this.props.remove.bind(this,index)}>del</button>
</li>
})
}
</ul>
)
}
}
class App extends React.Component{
// 进行props的继承
constructor(props){
super(props);
// super继承根数据
this.state = {
list:['aa','bb']
}
// 绑定了这些方法调用的this
this.addItem = this.addItem.bind(this);
this.del = this.del.bind(this);
};
addItem(str){
// 解构赋值 进行修改state状态
let list1 = [...this.state.list,str];
this.setState({
list:list1
})
};
del(idx){
let list1 = [...this.state.list];
list1.splice(idx,1);
this.setState({
list:list1
})
}
render(){
// 结构数据
let {list} = this.state;
return (
// 进行传值和传方法
<div>
<Txt addItem={this.addItem}/>
<List data={list} remove={this.del}/>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)
</script>
</body>
</html>
react组件传值传方法的更多相关文章
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue父组件为子组件传值传不过去？vue为数组传值，不能直接用等于的方式，要用循环加push的方式
父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.
- react组件中的方法？
SetState 设置状态 ReplaceState 替换状态 setProps设置属性 replacerProps替换属性 forceUpdate 强制更新 findDOMNode获取DOM节点 i ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- 规避 React 组件中的 bind(this)
React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...
- React - 组件：函数组件
目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...
- React组件绑定this的三种方法
我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理. 节点上使用bind绑定 特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性 ...
- 我们一起来详细的了解react的语法以及组件的使用方法
jsx的介绍 React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. jsx的优点 JSX 执行更快,因为它在编译为 J ...
- react组件间的传值方法
关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...
随机推荐
- Ubuntu 12.04上安装R语言
Ubuntu 12.04上安装R语言 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ R的安装 sudo gedit /etc/apt/sources. ...
- [福大软工] Z班 第5次成绩排行榜
作业链接 http://www.cnblogs.com/easteast/p/7613070.html 作业要求 团队项目--选题报告 1)发布博客: 一个团队发布一篇随笔,内容为团队的选题报告,选题 ...
- MySQL高级知识（五）——索引分析
前言:前面已经学习了explain(执行计划)的相关知识,这里利用explain对索引进行优化分析. 0.准备 首先创建三张表:tb_emp(职工表).tb_dept(部门表)和tb_desc(描述表 ...
- Ｃ#从IE缓存读取图片
如果用HttpWebRequest和HttpWebResponse从服务器取图片,会触发图片变化.于是想到从IE缓存读取图片 参考https://www.cnblogs.com/yelaiju/arc ...
- 解决y7000笔记本ubuntu18.04下 休眠挂起后唤醒花屏
定位问题,切换到核显后发现一点问题也没有,基本确定是显卡驱动的问题 但是由于配置环境比较复杂,不想重新装N卡驱动,所以另寻方法 sudo gedit /etc/default/grub 修改前 # I ...
- 3、原生jdbc链接数据库之锁与事务
一.锁的概念1.作用:是保证数据的一致性,只能一个人修改数据,不能同时多用户修改2.分类:行级锁和表级锁 乐观锁和悲观锁 二.事务1.为了保证数据的一致性和完整性,让数据库的多项操作合并为一个整体 ...
- Shell 文本处理三剑客之grep
grep ♦参数 -E,--extended-regexp 模式是扩展正则表达式 -i,--ignore-case 忽略大小写 -n,--line-number 打印行号 -v,--invert-ma ...
- node.js之express框架
之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express.今天的内容主要围绕这么几个方面? expr ...
- 【LOJ 2145】「SHOI2017」分手是祝愿
LOJ 2145 100pts 这题...BT啊 首先我们很容易想出\(dp(msk)\)表示现在灯开关的情况是\(msk\),期望通过多少步走到终结态. 很明显\(dp(msk)=\frac{1}{ ...
- C语言中__attribute__ ((at())绝对定位的应用
C语言中的关键字__attribute__ ,当时大一学C语言中没有接触过,后来工作中搞RFID的蓝牙标签卡开发,用的是MSP430G2332,直接用的是绝对定位: 1 const uint8_t f ...