看视频学习的react基础，学习的过程中做了一些案例进行辅助学习，在此记录，方便自己回顾
这里写目录标题
1 react 初步使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
// 1.创建虚拟dom
// 此处不要写引号 因为不是字符串 是虚拟dom
const VDOM = <h1 id="text">hello react</h1>
// 2.渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
2 创建虚拟Dom的两种方式
2.1 使用jsx创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用jsx创建</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
// 1.创建虚拟dom
// 此处不要写引号 因为不是字符串 是虚拟dom
const VDOM = <h1>hello react</h1>
// 2.渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
2.2 使用js创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用js创建</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/javascript">
// 1.创建虚拟dom
// 此处不要写引号 因为不是字符串 是虚拟dom
const VDOM = React.createElement('h1',{id:'title'},'hello react')
// 2.渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
3 虚拟Dom和真实Dom区别
/*
关于虚拟dom
1.本质是object
2.虚拟dom比较”轻“
3.虚拟dom最终会被react转化为真实的dom
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟真实</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
// 1.创建虚拟dom
// 此处不要写引号 因为不是字符串 是虚拟dom
const VDOM = <h1 id="text">hello react</h1>
// 2.渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById("test")
console.log('虚拟dom',VDOM);
console.log('真实dom',TDOM);
debugger;
</script>
</body>
</html>
需要借助debugger能看出效果，真实dom身上的属性明显很多，真实dom如下
虚拟dom如下
4 jsx语法规则
4.1 jsx语法规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx的语法规则</title>
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
</head>
<body>
<!-- 1.准备好一个容器 -->
<div id="test"></div>
<div id="test1"></div>
<!-- 2.引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const myId = 'Atguigu'
const myData = 'Hello'
//3.创建虚拟dom
const VDOM = (
<h2 id="atguigu">
<span>jsx的语法规则</span>
</h2>
)
const VDOM1 = (
<div>
<h2 id={myId.toLowerCase()} className='title'>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type='text'></input>
</div>
)
//4.渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
ReactDOM.render(VDOM1,document.getElementById('test1'))
/*
jsx语法规则
1、定义虚拟DOM 不要写引号
2、标签中混入js表达式用{}
3、样式的类名指定不要用class，要用className
4、内联样式，要用style={{key:value}}的形式去写
5、只有一个根标签
6、标签必须闭合
7、标签首字母
（1）、若小写字母开头，则将标签转为html中同名元素
若无改标签同名元素，则报错
（2）、若大写字母开头，react就去渲染对应的组件，
若组件没有定义，则报错
*/
</script>
</body>
</html>
4.2 jsx语法练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.准备好一个容器 -->
<div id="test"></div>
<!-- 2.引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
1.js表达式 （有一个返回值）
（1）、a
（2）、a+b
（3）、demo(1)
（4）、arr.map()
（5）、function test(){}
2.js语句 (改变代码走向)
（1）、if(){}
（2）、for(){}
（3）、switch(){}
=*/7
const data=['aa','bb','cc']
// 创建虚拟dom
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{data.map((item,index)=>{
return <li key={index}>{item}</li>
})}
</ul>
</div>
)
// 渲染虚拟dom
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
5 文件中定义组件
5.1 函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数式组件</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
// 1.创建函数式组件
function MyComponent(){
console.log(this) //这里的this 不是window ，因为babel解析的时候使用的是严格模式
return <h2>我是函数式组件，适用于简单组件</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'));
/*
过程
1.React解析组件标签，找到MyComponent组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转化为真实DOM，呈现到页面
*/
</script>
</body>
</html>
5.2 类式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类式组件</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
//1.创建类式组件
class MyComponent extends React.Component{
//render在MyComponent原型链对象上 供实例使用
render(){
return <h2>我是类式组件，适用于复杂组件</h2>
}
}
//2.渲染到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
</body>
</html>
6 组件实例的三大属性state
6.1 js原生事件绑定
实现点即按钮提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3" onclick="demo()">按钮3</button>
<script type="text/javascript">
const btn1 = document.getElementById('btn1')
btn1.addEventListener('click',()=>{
alert('按钮1')
})
const btn2 = document.getElementById('btn2')
btn2.onclick = ()=>{
alert('按钮2被点击了')
}
function demo(){
alert('按钮3被点击了')
}
</script>
</body>
</html>
6.2 state标准方式
实现点即切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
//创建组件
class Weather extends React.Component{
constructor(prop){
super(prop)
//初始化状态
this.state = {isHot : false,wind : '微风'}
//右侧: 先找到原型链上的changeWeather方法
// bind方法改变this 的指向
// 最后返回一个新的属性changgeWeather
// 新的属性changgeWeather 可以通过this调用
this.changeWeather = this.changeWeather.bind(this)
}
render(){
//读取状态
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':"凉爽"},{wind}</h1>
}
//changeWeather 方法是放在Weather的原型链上
changeWeather(){
//获取原来的状态
const isHot = this.state.isHot
//修改状态 必须要用setState
this.setState({isHot:!isHot})
}
}
//渲染
ReactDOM.render(<Weather/>,document.getElementById('test'))
/*
注意点3
1、onClick 大写问题
2、不用‘’ 用{} 取值问题
3、changeWeather 后面不加() 不会执行函数
使用步骤
1、在类中写方法 注意修改状态要用setstate
2、构造器中原型链上的方法转化为实体方法 改变this的指向
3、虚拟DOM中点击调用
*/
</script>
</body>
</html>
6.3 state简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
//创建组件
class Weather extends React.Component{
// constructor(prop){
// super(prop)
// state = {isHot : false,wind : '微风'}
// this.changeWeather = this.changeWeather.bind(this)
// }
//修改1：state 放外面作为类的一个属性 即初始化
state = {isHot : false,wind : '微风'}
//修改2：自定义方法
//赋值语句 将changeWeather变为类的属性
//箭头函数没有 this ，向上一层找this
//以后类中自定义方法都要写成赋值语句 + 箭头函数
changeWeather = () =>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':"凉爽"},{wind}</h1>
}
}
//渲染
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
7 组件实例的三大属性props
7.1 props的基本使用
实现如下数据传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>props基本使用 对props进行限制</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
/*
* 使用props 传递值
*/
class People extends React.Component{
render(){
const {name,sex,age} = this.props
return(
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age + 1}</li>
</ul>
)
}
}
ReactDOM.render(<People name="tom" sex="男" age={18}/>,document.getElementById('test1'))
ReactDOM.render(<People name="lc" sex="女" age={19}/>,document.getElementById('test2'))
/*
* 批量渲染
*/
const p = {name:'老刘',age:18,sex:'女'}
ReactDOM.render(<People{...p}/>,document.getElementById('test3'))
</script>
</body>
</html>
7.2 三点运算符复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三点运算符</title>
</head>
<body>
<script type="text/javascript">
let arr1 = [1,2,3]
let arr2 = [2,3,4]
let arr3 = [...arr1,...arr2]
console.log(...arr3)
//在函数中使用
function sum(...nums){
return nums.reduce((preValue,currentValue)=>{
return preValue + currentValue
})
}
console.log(sum(1,2,3,4,5))
//构造字面量对象时展开
let person1 = {name:'tom',age:18}
let person2 = {...person1,name:'haah',home:'shanghai'}
console.log(person1)
console.log(person2)
</script>
</body>
</html>
7.3 props实现限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对props进行限制</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
/*
* 使用props 传递值
* props是只读的
*/
class People extends React.Component{
render(){
//props是只读的
const {name,sex,age} = this.props
return(
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
/*
问题1；年龄总体加1；age就不可以用字符串的形式，用{}
解决： 对props进行限制
必要性限制
类型限制
默认值限制
*/
//指定标签的属性
People.propTypes = {
name:PropTypes.string.isRequired, //名字为字符串 是必须的
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func, //speak 必须为方法
}
// 指定标签的默认值
People.defaultProps = {
sex:'不男不女',
age:18
}
ReactDOM.render(<People name="tom" sex="男" speak={speak()}/>,document.getElementById('test1'))
ReactDOM.render(<People name="lc" age={19}/>,document.getElementById('test2'))
/*
* 批量渲染
*/
const p = {name:'老刘',age:18,sex:'女'}
ReactDOM.render(<People{...p}/>,document.getElementById('test3'))
function speak(){
console.log("说话")
}
// 注意 string s不要大写
</script>
</body>
</html>
7.4 props简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对props进行限制</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
/*
* 使用props 传递值
* props是只读的
*/
class People extends React.Component{
//指定标签的属性
static propTypes = {
name:PropTypes.string.isRequired, //名字为字符串 是必须的
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func, //speak 必须为方法
}
// 指定标签的默认值
static defaultProps = {
sex:'不男不女',
age:18
}
//初始化状态
state = {}
render(){
//props是只读的
const {name,sex,age} = this.props
return(
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
ReactDOM.render(<People name="tom" sex="男" speak={speak()}/>,document.getElementById('test1'))
ReactDOM.render(<People name="lc" age={19}/>,document.getElementById('test2'))
/*
* 批量渲染
*/
const p = {name:'老刘',age:18,sex:'女'}
ReactDOM.render(<People{...p}/>,document.getElementById('test3'))
function speak(){
console.log("说话")
}
</script>
</body>
</html>
7.5 函数时组件使用props
实现如下数据传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对props进行限制</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
// 函数式组件
function Person(props){
const {name,sex,age} = props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
//限制
//指定标签的属性
Person.propTypes = {
name:PropTypes.string.isRequired, //名字为字符串 是必须的
sex:PropTypes.string,
age:PropTypes.number,
}
// 指定标签的默认值
Person.defaultProps = {
sex:'不男不女',
age:18
}
ReactDOM.render(<Person name="tom" />,document.getElementById('test1'))
</script>
</body>
</html>
8 组件实例的三大属性refs
8.1 refs字符串实现
按照要求实现数据提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串实现</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
//创建组件类
class Demo extends React.Component{
showdata1 = ()=>{
console.log(this)
const {input1} = this.refs
alert(input1.value)
}
showdata2 = ()=>{
console.log(this)
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<input type="text" placeholder="点击按钮提示数据" ref="input1"/>
<button onClick={this.showdata1}>点击提示数据</button>
<input type="text" onBlur={this.showdata2} placeholder="失去焦点提示数据" ref="input2"/>
</div>
)
}
}
//渲染
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
8.2 refs回调函数实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串实现</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
//创建组件类
class Demo extends React.Component{
showdata1 = ()=>{
console.log(this)
//input1 变为类实例的一个属性了 直接从 this上取即可
const {input1} = this
alert(input1.value)
}
showdata2 = ()=>{
console.log(this)
const {input2} = this
alert(input2.value)
}
render(){
return(
<div>
<input type="text" placeholder="点击按钮提示数据" ref={c => this.input1 = c}/>
<button onClick={this.showdata1}>点击提示数据</button>
<input type="text" onBlur={this.showdata2} placeholder="失去焦点提示数据" ref={c => this.input2 = c}/>
</div>
)
}
}
//渲染
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
8.3 createref实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串实现</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
//创建组件类
class Demo extends React.Component{
//通过creatRef创建一个容器用来存
myRef1 = React.createRef();
myRef2 = React.createRef();
showdata1 = ()=>{
console.log(this.myRef1.current.value)
//input1 变为类实例的一个属性了 直接从 this上取即可
}
showdata2 = ()=>{
console.log(this.myRef2.current.value)
}
render(){
return(
<div>
{/* 把这个标签 存入实体类中的myRef属性中*/}
<input type="text" placeholder="点击按钮提示数据" ref={this.myRef1}/>
<button onClick={this.showdata1}>点击提示数据</button>
<input type="text" onBlur={this.showdata2} placeholder="失去焦点提示数据" ref={this.myRef2}/>
</div>
)
}
}
//渲染
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
8.4 react事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串实现</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
class Demo extends React.Component{
/**
1. 通过onXxx属性指定事件处理函数(注意大小写)
1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2. 通过event.target得到发生事件的DOM元素对象
尽量避免ref的使用
* */
myRef1 = React.createRef();
myRef2 = React.createRef();
showdata1 = ()=>{
console.log(this.myRef1.current.value)
}
//传入 event
showdata2 = (event)=>{
console.log(event.target.value)
}
render(){
return(
<div>
{/* 把这个标签 存入实体类中的myRef属性中*/}
<input type="text" placeholder="点击按钮提示数据" ref={this.myRef1}/>
<button onClick={this.showdata1}>点击提示数据</button>
{/* 发生事件的DOM元素和要操作的DOM元素是一个可以不写ref*/}
<input type="text" onBlur={this.showdata2} placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
9 收集表单数据
9.1 非受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非受控组件 现用现取</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
class Login extends React.Component{
handleSubmit = (event) =>{
//组织默认事件
event.preventDefault()
const {uname,upword} = this
alert(uname.value)
}
render(){
return (<form action="wwww.baidu.com" onSubmit={this.handleSubmit}>
用户名:<input type="text" name="uname" ref={c => this.uname = c}/>
密码:<input type="password" name="upword" ref={c => this.upword = c}/>
<button>登入</button>
</form>)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
9.2 受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>受控组件,页面中所有输入的dom，把输入数据维护到state，使用的时候从state中取</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
class Login extends React.Component{
//初始胡
state = {
username:'', //用户名
password:'' //密码
}
//保存到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
savePassword = (event)=>{
this.setState({password:event.target.value})
}
handleSubmit = (event) =>{
//组织默认事件
event.preventDefault()
const {username,password} = this.state
alert(username)
}
render(){
return (<form action="wwww.baidu.com" onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type="text" name="uname"/>
密码:<input onChange={this.savePassword} type="password" name="upword"/>
<button>登入</button>
</form>)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
10 高级函数和函数柯里化
10.1 高级函数和函数柯里化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高阶函数 函数柯里化</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
/*
高阶函数：如果一个函数符合下面2个中的任意一个 那该函数就是高阶函数
1.若A函数 接收的参数时一个函数，那么A就可以称之为高阶函数
2.若A函数 调用的返回值依然是一个函数，那么A就可以称之为高阶函数
函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码方式
*/
class Login extends React.Component{
//初始胡
state = {
username:'', //用户名
password:'' //密码
}
//保存到状态中 是高阶函数 满足函数柯里化
saveFormData = (dateType)=>{
return (event)=>{
this.setState({[dateType]:event.target.value})
}
}
handleSubmit = (event) =>{
//组织默认事件
event.preventDefault()
const {username,password} = this.state
alert(username)
}
render(){
return (<form action="wwww.baidu.com" onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveFormData('username')} type="text" name="uname"/>
密码:<input onChange={this.saveFormData('password')} type="password" name="upword"/>
<button>登入</button>
</form>)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
10.2 不用函数柯里化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高阶函数 函数柯里化</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
<!-- 引入js 注意顺序 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 开始编码 此处一定要写babel-->
<script type="text/babel">
/*
高阶函数：如果一个函数符合下面2个中的任意一个 那该函数就是高阶函数
1.若A函数 接收的参数时一个函数，那么A就可以称之为高阶函数
2.若A函数 调用的返回值依然是一个函数，那么A就可以称之为高阶函数
函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码方式
*/
class Login extends React.Component{
//初始胡
state = {
username:'', //用户名
password:'' //密码
}
//保存到状态中 是高阶函数 满足函数柯里化
saveFormData = (dateType,event)=>{
this.setState({[dateType]:event.target.value})
}
handleSubmit = (event) =>{
//组织默认事件
event.preventDefault()
const {username,password} = this.state
alert(username)
}
render(){
return (<form action="wwww.baidu.com" onSubmit={this.handleSubmit}>
用户名:<input onChange={(event) =>{this.saveFormData('username',event)}} type="text" name="uname"/>
密码:<input onChange={(event)=>{this.saveFormData('password',event)}} type="password" name="upword"/>
<button>登入</button>
</form>)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>