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 ...
随机推荐
- JDK动态代理和cglib代理详解
JDK动态代理 先做一下简单的描述,通过代理之后返回的对象已并非原类所new出来的对象,而是代理对象.JDK的动态代理是基于接口的,也就是说,被代理类必须实现一个或多个接口.主要原因是JDK的代理原理 ...
- python 基本数据类型--字符串实例详解
字符串(str) :把字符连成串. 在python中⽤', ", ''', """引起来的内容被称为字符串 . 注意:python中没有单一字符说法,统一称叫字 ...
- maven 将jar包推送到自己本机的maven库
mvn install:install-file -DgroupId=com.wdcloud.sdk -DartifactId=front-category-signed -Dversion=1.0. ...
- python六十九课——网络编程之TCP协议
1.1 概述: TCP协议通过三次握手协议将客户端与服务器端连接,两端使用各自的Socket对象.Socket对象中包含了IO流,供数据传输. 即:TCP协议在客户端与服务器端通过Socket组成了I ...
- [找工作] 2019秋招｜从春招到秋招，Java岗经验总结（收获AT）
转自(有更多) https://blog.csdn.net/zj15527620802/article/month/2018/10 前言 找工作是一件辛酸而又难忘的历程.经历过焦虑.等待.希望,我们最 ...
- 深度学习之GRU网络
1.GRU概述 GRU是LSTM网络的一种效果很好的变体,它较LSTM网络的结构更加简单,而且效果也很好,因此也是当前非常流形的一种网络.GRU既然是LSTM的变体,因此也是可以解决RNN网络中的长依 ...
- Python：Day55 ORM多表操作
命令行创建UTF8数据库: CREATE DATABASE 数据库名称 DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 创建多表(外键)
- shell笔记-常用
shell提取文件名: http://blog.csdn.net/u011544778/article/details/50773053 一.使用${} 1.${var##*/}该命令的作用是去掉变量 ...
- Elicpse使用技巧-打开选中文件文件夹或者包的当前目录
很多时候,我们需要在eclipse那里打开选中文件(文件夹,包)的当前目录,在资源管理器那里显示这个目录,这个时候,我们又不想采用“选中文件/文件夹/包名--右击--Properties--Locat ...
- Java正则表达式初探(一)
好多同学们总是听别人说起正则表达式这个东西,也有很多用接触到实际使用过.但是相信有很大一部分人是在用的时候采取网站上搜索,拿一个一知半解的别人写的例子过来,简单测试下功能可用,就OK了.正则表达式那晦 ...