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 ...
随机推荐
- K-means算法的matlab程序（初步）
K-means算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648369.html 文章中已经介绍了K-means算法,现在用matlab程序实现 ...
- 合并两个有序数组的golang实现
给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m 和 n. ...
- Pandas 处理丢失数据
处理丢失数据 import pandas as pd from pandas import Series, DataFrame import numpy as np 有两种丢失数据: 1. None ...
- WPF设计の不规则窗体
我们在工作中,经常会需要画一些不规则的窗体,现在总结如下. 一.利用VisualBrush实现.这依赖于VisualBrush的特性,任何控件可以作为画刷,而画刷又可以作为背景. 此种方法可以用于实现 ...
- Java 8 新特性:2-消费者（Consumer）接口
(原) 在上一篇,用到过这样一个方法: list.forEach(new Consumer<Integer>() { @Override public void accept(Intege ...
- mybatis generator使用方式
资源: 一 https://files.cnblogs.com/files/jiuya/jdbcT.zip 二 https://files.cnblogs.com/files/jiuya/mybat ...
- 分享一个前后端分离的web项目（vue+spring boot）
Github地址:https://github.com/smallsnail-wh 前端项目名为wh-web 后端项目名为wh-server 项目展示地址为我的github pages(https:/ ...
- 10 python 初学（Python 的编码解码）
Python 2 : ASCII Python 3 :Unicode
- web路径问题相对路径和绝对路径，计算机相对路径和绝对路径
**首先得明白相对路径和绝对路径的概念和区别:****相对路径:**相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系.使用相对路径可以为我们带来非常多的便利.([百度百科])* ...
- 深入浅出Tomcat系列
原本打算一篇文章就发了的,无奈文章太长,阅读压力较大.为了让阅读体验更好一些,还是分多篇吧,大概6篇. 下面是这个主题的目录: 深入浅出Tomcat/1- 来历和配置文件 深入浅出Tomcat/2 - ...