1、父子通信

1.1 父-子 props

父组件:
    class myPage extends React.Component {
render() {
return (
<div>
{/* 子组件 自定义page 是子组件要接受的属性 mypage是要传递的内容*/}
<TabBar page="mypage"></TabBar>
<div className="pd-md">
我是一个mypage
</div>
</div>
);
}
}
子组件:
class TabBarComponents extends React.Component {
constructor(props) {
// 继承父组件
super(props);
this.state = {
// 接受父组件传的属性
selectedTab: props.page,
};
}
// 然后使用 this.state.selectedTab 这个值, 这个就是mypage
....
}

1.2

子-》父

子组件:将子组件的value值 text 传递给父组件

    class Input extends Component {
changeTitle(event) {
// 子组件调用 父组件通过props传递过来的方法 onChangeText,将要传递的值传进方法
this.props.onChangeText(event)
}
componentDidMount() {
this.props.getParentTab(1)
}
render() {
return (
<div className="list-wrapper">
<input type="text" onChange={this.changeTitle.bind(this)} value={this.props.text} />
<input type="text" onChange={this.props.getParentTab('2')} value={this.props.text} />
</div>
);
}
}

父组件:


class myPage extends React.Component {
constructor(props) {
super(props);
this.state = {newText: 'default'};
}
changeText(event) {
this.setState({
newText: event.target.value,
})
}
getParentTab = (tab) => {
console.log(tab)
}
render() {
return (
<div>
<div className="pd-md">
<h3>我是一个mypage</h3>
<div>
{this.state.newText}
{/* 子组件 */}
<InputCompenent onChangeText={this.changeText.bind(this)} text={this.state.newText}></InputCompenent>
<SlideFirst className="content" getParentTab={getParentTab} />
</div>
</div> </div>
);
}
}

子组件通过调用 props.onChangeText 方法,将值传递进来,父组件通过 changeText 方法来接受 传递进来的值。

套路:子组件通过调用 父组件传递的方法 传值。

父组件调用子组件的方法:

父组件

onRef = (ref) => {
this.child = ref
} addEtcItem = () => {
this.child.add(); // 调用子组件的方法
}
....
<ChildItem
onRef={this.onRef}
/>

子组件:

    add = () => {
// todo
};

2、在标签上写样式的方法

{
<div style={{
display: this.state.hasMore ? 'none' : 'block',
textAlign: 'center',
borderTop: '1px solid #ddd',
width: '80%',
paddingTop: '15px',
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: '70px'
}}>
不要扯了,已经到底了!
</div>
}

3、input type="file" onchange 获取 e.target

DOM:
<input type="file" id="uploadExcel" onChange={this.uploadFiles} className="beauty-input"/> js:
uploadFiles = (e) => {
e.persist(); // 不然e.target 为null
console.log(e)
....

react 常见api 使用(长期更新)的更多相关文章

  1. python的多版本安装以及常见错误(长期更新)

    (此文长期更新)Python安装常见错误汇总 注:本教程以python3.6为基准 既然是总结安装过程中遇到的错误,就顺便记录一下我的安装过程好了. 先来列举一下安装python3.6过程中可能需要的 ...

  2. 常用开放api【长期更新】

    获取时间: 苏宁:http://quan.suning.com/getSysTime.do 淘宝:http://api.m.taobao.com/rest/api3.do?api=mtop.commo ...

  3. Java代码优化(长期更新)

    前言 2016年3月修改,结合自己的工作和平时学习的体验重新谈一下为什么要进行代码优化.在修改之前,我的说法是这样的: 就像鲸鱼吃虾米一样,也许吃一个两个虾米对于鲸鱼来说作用不大,但是吃的虾米多了,鲸 ...

  4. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  5. React 组件 API

    React 组件 API 在本章节中我们将讨论 React 组件 API.我们将讲解以下7个方法: 设置状态:setState 替换状态:replaceState 设置属性:setProps 替换属性 ...

  6. iOS-工作经验+资料分享(长期更新)

    在此记录工作中的一些经验和技术资料 长期更新 欢迎各位业内朋友指正.交流技术上的问题 0.苹果开发联盟电话 4006 701855 1.轻易不用使用tableViewController,因为改变他自 ...

  7. 免费api大全(更新中)

    免费api大全(更新中) API大全  http://www.apidq.com/    (这个碉堡了) 天气接口 气象局接口 完整数据:http://m.weather.com.cn/data/10 ...

  8. 【quickhybrid】API的分类:短期API、长期API

    前言 一切就绪,开始规划API,这里在规划前对API进行了一次分类:短期API.长期API 首先申明下,这个是在实际框架演变过程中自创的一个概念,其它混合框架可能也会有这个概念,但应该是会在原生底层来 ...

  9. Ubuntu16.04系统美化、常用软件安装等,长期更新

    Ubuntu16.04系统美化.常用软件安装等,长期更新 IT之家啊 18-09-0915:00 因为我个人偏向于玩VPS.服务器之类的东西,所以一般我都是用CentOS.不过对于桌面版的Linux, ...

随机推荐

  1. DevOps时代,企业数字化转型需要强大的工具链

    伴随时代的飞速进步,中国的人口红利带来了互联网业务的快速发展,巨大的流量也带动了技术的不断革新,研发的模式也在不断变化.传统企业纷纷效仿互联网的做法,结合DevOps进行数字化的转型. 通常提到Dev ...

  2. pytorch识别CIFAR10:训练ResNet-34(自定义transform,动态调整学习率,准确率提升到94.33%)

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 前面通过数据增强,ResNet-34残差网络识别CIFAR10,准确率达到了92.6. 这里对训练过程 ...

  3. ABP拦截器之UnitOfWorkRegistrar(二)

    在上面一篇中我们主要是了解了在ABP系统中是如何使用UnitOfWork以及整个ABP系统中如何执行这些过程的,那么这一篇就让我们来看看UnitOfWorkManager中在执行Begin和Compl ...

  4. 上传图片,通过node服务器存储在指定目录

    最近做毕设,需要上传图片,因为在本地服务器运行,所以想着前端上传后,通过node服务器接收图片,存储在指定的目录下. 一.前端实现 1.前端的页面和上传图片是利用element-ui组件实现的,&qu ...

  5. P1438 无聊的数列 (差分+线段树)

    题目 P1438 无聊的数列 解析: 先考虑修改,用差分的基本思想,左端点加上首项\(k\),修改区间\((l,r]\)内每个数的差分数组都加上公差\(d\),最后的\(r+1\)再减去\(k+(r- ...

  6. Oracle中的AWR,全称为Automatic Workload Repository

    Oracle中的AWR,全称为Automatic Workload Repository,自动负载信息库.它收集关于特定数据库的操作统计信息和其他统计信息,Oracle以固定的时间间隔(默认为1个小时 ...

  7. JavaScript千分符---正则实现

    一般在JavaScript中实现千分符,是使用切割+连接一顿操作 这里尝试一下使用正则快速实现千分符 let num0 = '12' let num1 = '123' let num2 = '1234 ...

  8. django 2.接口之工作原理

    1.创建应用程序有两种方法,第一种就是在新建项目的时候,在最初使的时填入应用程序名称,第二种就是进入目录下面,输入 python manage.py startapp appName 就会自动生成一个 ...

  9. (BST 递归) leetcode98. Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  10. k8s常用命令演示

    kubectl run --image=xxx name_xx --port kubectl run --image=nginx nginx-app --port=80 kubectl expose ...