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. ABP实践(2)-ASP.NET Core 2.x版本EntityFrameworkCore(EF)使用mysql数据库

    上一篇中EntityFrameworkCore默认使用的是微软的sql server,本篇改为mysql步骤如下: 1,在基础层xxx.EntityFrameworkCore依赖项添加Pomelo.E ...

  2. flutter 主题切换

    ### 主题 ``` // 1.main主文件 import 'package:flutter_smart_park/config/theme.dart' show AppTheme; Provide ...

  3. springboot 的部分细节

    Application.properties 中#指定端口号 server.port= #指定访问路径必须以/crud/xxx 开始 server.servlet.context-path=/crud ...

  4. MonkeyRunner API简介

    MonkeyRunner工具主要有三个类: MonkeyRunner MonkeyDevice MonkeyImage 官方API文档 :http://www.android-doc.com/tool ...

  5. 【dp】友好城市

    题目一: [题目描述] Palmia国有一条横贯东西的大河,河有笔直的南北两岸,岸上各有位置各不相同的N个城市.北岸的每个城市有且仅有一个友好城市在南岸,而且不同城市的友好城市不相同. 每对友好城市都 ...

  6. 【linux】工作中linux系统常用命令操作整理

    1.Linux如何查看端口 使用lsof(list open files)命令,lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000. 或者使用n ...

  7. Day053--MySQL

    MySQL安装和基本管理https://www.cnblogs.com/majj/p/9160383.html 管理员模式运行cmd 打开终端,输入mysqld,打开服务端. 打开终端,输入mysql ...

  8. MySQL8.0.19主从环境搭建(CentOS7)

    默认情况下,复制是异步的,从站不需要永久连接以接收来自主站的更新.根据配置,您可以复制数据库中的所有数据库,所选数据库甚至选定的表. MySQL中复制的优点包括: 横向扩展解决方案 - 在多个从站之间 ...

  9. linux下的/dev/shm/ 以及与swap目录的区别【转】

    /dev/shm 概念 首先可以看出来/dev/shm是一个设备文件, 可以把/dev/shm看作是系统内存的入口, 可以把它看做是一块物理存储设备,一个tmp filesystem, 你可以通过这个 ...

  10. [译]Ocelot - Caching

    原文 Ocelot支持基本的缓存,目前Ocelot的缓存是通过CacheManager project实现的. 下面的示例展示了如何启用缓存: s.AddOcelot() .AddCacheManag ...