受控组件：表单

1. 非受控组件表单元素值不受所在组件状态的控制, 我们将这样的表单元素称作: 非受控组件.
2. 受控组件受控组件 : 值受到 React 组件状态控制的表单元素一般是通过 defaultValue 属性, onChange 事件配合将非受控组件变为受控组件.
3. 多表单元素操作 ：4,5,6
4. 给表单元素添加 name 属性，名称与 state 相同
5. 根据表单元素类型获取对应值
6. 在 change 事件处理程序中通过 [name] 来修改对应的 state

通过value和onChange事件，让表单元素变成 受控组件

复选框，是否勾选 checked={ }, 配合onChange事件

获取最新input值

操作value使其变成受控组件（文本框、富文本框、下拉框）

name判断点的哪个

[ ]：可以对其中的表达式进行取值预算：取值结束，[ ] 就没有了

e.target        获取目标对象

e.target.type        获取元素类型

e.target.name        获取元素的name

e.target.type="checkbox"         获取元素的复选状态

e.target.value        获取元素的值

value获取表单元素的值

 升级：name 判断，考虑表单提交的很多元素比较麻烦

 升级：[ ] 对其中表达式取值预算，取值结束 [ ] 就没了

复选框

代码如下：：：

import React, { Component } from 'react';
import './App.scss'
// react应用的组件有两种创建方式：函数式组件，类组件
// rcc 创建calss组件
// rsf创建函数式组件class App extends Component {constructor(props){super(props)// 定义组件状态this.state={loginname:'',password:'',isread:false}}handleChange(e){console.log(e.target);// if (e.target.name == 'loginname') {//   this.setState({loginname:e.target.value})// }else if(e.target.name == 'password'){//   this.setState({password:e.target.value})// }//[] 可以对其中的表达式进行取值运算，取值结束，[] 就没有了// e.target  //获取目标对象// e.target.type  //获取元素类型// e.target.name //获取元素的name// e.target.type='checkbox' //元素的复选状态// e.target.value //元素的值// name名和state中名一样，那就可以这样简写了，一次修改所有表单元素的值 this.setState({[e.target.name]:e.target.type == "checkbox" ? e.target.checked : e.target.value})}login(){console.log(this.state);}render() {return (<div className='login'><div className='block'>{/* 通过 value属性 和 onChange事件 让表单元素变成 受控元素 */}<input name='loginname' type="text" placeholder='输入账号' value={this.state.loginname} onChange={(e)=>{this.handleChange(e)}} /></div><div className='block'>{/* 通过value属性 和 onChange事件 让表单元素变成 受控元素 */}<input name='password' type="password" placeholder='输入密码' value={this.state.password} onChange={(e)=>{this.handleChange(e)}} /></div><div className='block'>{/* 通过value属性 和 onChange事件 让表单元素变成受控元素 */}<input name='isread' type="checkbox" checked={this.state.isread} onChange={(e)=>{this.handleChange(e)}} />勾选用户协议</div><div className='block'>{/* input type=buttom 相当于提交表单 */}<input type="button" value='登录' onClick={()=>{this.login()}}/></div></div>);}
}export default App;

 组件通信：

自定义属性：父向子传值

方法：子向父传值：本质就是一个回调函数

和vue都是写在父中导入的子组件上

//父组件向子组件传值: 父组件通过自定义属性传值给子组件, 子组件内部通过props获取值

//子组件向父组件传值: 父组件通过自定义属性传一个函数给子组件, 子组件内部通过props获取该函数并在合适的时机回调该函数完成传值.

//兄弟组件传值: 借助events库 先实例化一个公共的通信对象, 其中一个组件提前监听事件, 另一个兄弟组件在合适的时机触发事件并传值.

//跨组件传值: 借助createContext方法 先实例化一个公共的上下文通信对象, 外层组件通过Provider组件的value属性传值, 内层组件和上下文通信对象建立连接, 然后再通过this.context获取值.

父向子，子向父

兄弟组件通信：自带 events 不用装（尝试自己封装eventBus库）

使用之前要先建立eventBus文件，导入eventBus：：：emit 触发事件传值，on监听，off 取消监听

emit触发传值

 、

on监听，off 写在取消监听，性能优化

性能优化：取消监听。不是同一个函数名不能取消监听js中有体验：绑定函数名可以取消监听成功

跨组件通信：需要借助createContext方法，先实例化一个 utils文件夹下

React.createContext 实例化一个功能的通信上下文对象

创建上下文

MyContext.Provider 的value属性传值

app主文件。我的上下文

中间隔层文件

Class.contextType 和组件通信建立连接

类 构造函数

非嵌套组件间通信

1.利用二者共同父组件进行通信

2.使用自定义事件的方式

创建新项目typescript项目：：：安装ts。

已有项目添加typescript则需要加配置项

npx create-react-app my-app --template typescript

tabbar底部导航：另类写法：主要用来子向父传递了索引，父判断

父

import './App.scss';
// React应用的组件有两种创建方式: 函数式组件, 类组件
// rcc 创建class组件
// rsf 创建函数式组件
import React, { Component } from 'react';import TopNav from '@/components/TopNav';
import Swiper from '@/components/Swiper';
import CateList from '@/components/CateList';
import Tabbar from '@/components/Tabbar';
import Cate from '@/components/Cate/Cate';class App extends Component {constructor(props){super(props);this.state = { index:0 }}getIndex = (i)=>{this.setState({ index: i })}render() {return (<div>{/* 顶部导航 */}{/* 轮播图 */}{/* 分类导航 */}{this.state.index == 0 && <><TopNav /><Swiper /><CateList /></>}{this.state.index == 1 && <Cate />}{/* 底部导航 */}<Tabbar getIndex={this.getIndex} /></div>);}
}export default App;

子

import React, { Component } from 'react';
import './index.scss'
class Tabbar extends Component {constructor(props) {// props和state的区别// 分别介绍两个技术的概念，先回答相同点，再回到不同点，最后总结一下（个人感悟，注意事项）// props是个对象，用来接收父组件传来的值，props默认是只读的（如果某个属性是引用类型，则引用数据的属性是可以修改）// state是个对象，用来定义组件自身的状态，可以通过setState来修改super(props)// 定义组件状态this.state = {tabs: [{ text: '首页', img: '' },{ text: '分类', img: '' },{ text: '首页', img: '' },{ text: '首页', img: '' },],currentIndex: 0,}}handleClick(index) {// 回调父组件的方法this.props.getIndex(index)// this.state.currentIndex = index //这个写法可以保存数据到组件状态中，但是无法触发组件更新// setState会保存数据到组件状态中，同时会触发组件更新this.setState({ currentIndex: index }, () => {// 想要获取setState保存的最新状态值，必须在第二个参数的回调函数中获取（setState本身是异步的）// console.log('handleClick', this.state.currentIndex);})}render() {return (<div className='tabbar'>{this.state.tabs.map((item, index) => {return(<div className={`btn ${this.state.currentIndex == index? 'active':''}`} key={index} onClick={()=>{this.handleClick(index)}}><img src={item.img} alt="" /><div className='text'>{item.text}</div></div>)})}</div>);}
}export default Tabbar;

.tabbar{position: fixed;bottom: 0;width: 100%;display: flex;justify-content: space-around;align-items: center;margin: 15px;border-top: 1px solid #ccc;.btn.active{color: red;font-weight: bold;}
}