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 ...
随机推荐
- ELK+Kafka 企业日志收集平台(一)
背景: 最近线上上了ELK,但是只用了一台Redis在中间作为消息队列,以减轻前端es集群的压力,Redis的集群解决方案暂时没有接触过,并且Redis作为消息队列并不是它的强项:所以最近将Redis ...
- react中使用Ajax请求（axios，Fetch）
React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...
- JavaScript数组对象详情
Array 数组概述 Array 类型是 ECMAScript 最常用的类型.javaScript 中的 Array 类型和其他语言中的数组有着很大的区别. 虽然数组都是有序排列,但 javaScri ...
- 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...
- php面试题整理（五）
表单也得改
- C++ 星号* 与 引用&
星号 * 1. 声明的时候有*, 表示指针变量 int *p=&a;// '&'的作用就是把a变量在内存中的地址给提取出来 2. * +地址, 表示地址操作符 3. 数字*数字, 表示 ...
- (predicted == labels).sum().item()作用
⚠️(predicted == labels).sum().item()作用,举个小例子介绍: # -*- coding: utf-8 -*-import torch import numpy as ...
- docker 4 docker的三要素
docker三要素 镜像,容器,仓库 镜像 docker镜像(image)就是一个只读的模板,镜像可以用来创建docker容器,一个镜像可以创建很多个容器 容器 docker利用容器(containe ...
- express+vue+mongodb+session 实现注册登录
上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以 ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...