1.state（状态）
1）原生事件的绑定
<!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>2_原生事件绑定</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<!-- 当点击按钮3时，将“引号中的JS语句”拿出来执行 -->
<button onclick="demo()">按钮3</button>
<!-- 方式1 -->
<script type="text/javascript">
const btn1 = document.getElementById('btn1')
btn1.addEventListener('click',()=>{
alert('按钮1被点击了')
})
// 方式2
const btn2 = document.getElementById('btn2')
btn2.onclick =()=>{
alert('按钮2被点击了')
}
// 方式3，React中推荐
function demo(){
alert('按钮3被点击了')
}
</script>
</body>
</html>
2）实例学习
要求创建一个网页，显示“今天天气很炎热”，用户点击标题，可以更改为“今天天气很凉爽”
a.标准写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>state</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//借助构造器初始化状态，并读出来使用
//1.创建组件
class Weather extends React.Component{
//构造器调用几次？ ———— 1次，因为只用了一次<Weather/>标签，React就只帮忙new出来一个Weather的实例，所以构造器只执行了一次。
constructor(props){
console.log('constructor')
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
//bind的作用 1.生成新的函数。 2.更改函数中的this，bind中的（this）<=> 构造器中的this <=> Weather。
}
//render（）调用几次？ ———— 1+n次 ，1是初始化那次；n是状态更新的次数，因为每一次去更新状态，页面都重新渲染出一个新的结果，每一次更改状态，都重新拿到最新的返回值，重新运算三元表达式，然后在决定到底是炎热还是凉爽。
render(){
console.log('render')
//读取状态
const {isHot,wind} = this.state
//把{demo函数}交给onClick作为回调，当点击时，帮你调用demo函数
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot? '炎热':'凉爽'},{wind}</h1>
}
//changeWeather调用几次？ ———— n次，点击几次，就调用几次。
changeWeather(){
console.log('changeWeather')
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用的。
//类中的方法，默认开启了局部的严格模式，所以changeWeather中的this为undefined。
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行修改更新，且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
//严重注意：状态（state）不可直接更改，下面这行就是直接更改，要借助一个内置的API去更改
// this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
function changeWether(){
// console.log('此处修改isHot的值');
}
</script>
</body>
</html>
b.实际简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>state的简写方式</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component{
// constructor(props){
// super(props)
// // this.state = {isHot:false,wind:'微风'}
// // this.changeWeather = this.changeWeather.bind(this)
// }
//往Weather的实例对象上，添加一个属性，名为state，值为一个对象。
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot? '炎热':'凉爽'},{wind}</h1>
}
//自定义方法，要用赋值语句的形式+箭头函数。
// 箭头函数 () => ，没有自己的this。但是，如果在箭头函数中使用了this关键字，它就会找其外层函数的this来使用，也就是Weather。
changeWeather = () => {
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
3)总结
a.理解
state是对组件对象最重要的属性，值是对象（可以包含多个key-value的组合）。
组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）。
b.强烈注意
组件中render方法的this为组件的实例对象。
组件自定义的方法中this为undefined怎么解决？
a)强制绑定this:通过函数对象的bind()。
b)箭头函数
状态数据不能直接修改或更新。
2.props(属性)
1)props的基本使用
与批量传递标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>1_props的基本使用</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test1"></div>
<div id = "test2"></div>
<div id = "test3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建组件
class Person extends React.Component{
render(){
// console.log(this);
//用结构赋值的方式，提前从props上拿到属性
const {name,age,sex} = this.props
return(
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
//2.渲染组件到页面
// ReactDOM.render(<Person name='tom' age='19' sex='男'/>,document.getElementById('test1'))
// ReactDOM.render(<Person name='to' age='13' sex='女'/>,document.getElementById('test2'))
// ReactDOM.render(<Person name='tm' age='22' sex='男'/>,document.getElementById('test3'))
//批量传递标签属性
const p = {name:'老刘',age:18,sex:'女'}
// console.log('@',...p);
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
</script>
</body>
</html>
2)展开运算符
知识回顾，与使用方法介绍
<!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>4_展开运算符</title>
</head>
<body>
<script type="text/javascript">
let arr1 = [1,3,5,7,9]
let arr2 = [2,4,6,8,10]
console.log(...arr1); //展开一个数组
console.log(arr1);
let arr3 = [...arr1,...arr2] //连接一个数组
console.log(...arr3);
//在函数中使用
//1.普通使用
// function sum (a,b){
// return a+b
// }
// console.log(sum(1,2));
//2.当多参数传递时 !学习js中数组方法！
function sum (...numbers){
return numbers.reduce((preValue,currentValue) => {
return preValue+currentValue
})
}
console.log(sum(1,2,3,4));
//构造字面量对象时使用展开语法
let person = {name:'tom',age:18}
let person1 = {...person}
// console.log(...person); // 报错，在原生js中，展开运算符不能展开对象；在React中babel和jsx可以实现，但仅限于在标签中使用。
person.name = 'jerry'
console.log(person1);
console.log(person);
//合并
let person2 = {...person,name:'jack',address:"CHINA"}
console.log(person2);
</script>
</body>
</html>
3)对props进行限制
引入prop-types，用于对组件标签属性进行限制
添加Person.propTypes ，对标签属性进行限制
函数的限制方法
添加 Person.defaultProps，指定标签的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>2_对props进行限制</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test1"></div>
<div id = "test2"></div>
<div id = "test3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//1.创建组件
class Person extends React.Component{
render(){
// console.log(this);
//用结构赋值的方式，提前从props上拿到属性
const {name,age,sex} = this.props
//props是只读的
// this.props.name = 'jack' //此行代码会报错，因为props是只读的
return(
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name:PropTypes.string.isRequired, //限制标签内的name属性，必传，且为字符串
age:PropTypes.number, //限制标签内的age属性，且为数字
sex:PropTypes.string,//限制标签内的sex属性，且为字符串
speak:PropTypes.func,//限制标签内的speak属性，且为函数
}
//指定默认标签属性值
Person.defaultProps ={
sex:'男', //sex默认值为男
age:22, //age默认值为22
}
//2.渲染组件到页面
ReactDOM.render(<Person name='tom' age={19} sex='男'/>,document.getElementById('test1'))
ReactDOM.render(<Person name='to' speak='{speak}'/>,document.getElementById('test2'))
// ReactDOM.render(<Person name='tm' age='22' sex='男'/>,document.getElementById('test3'))
//批量传递标签属性
const p = {name:'老刘',age:18,sex:'女'}
// console.log('@',...p);
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
function speak(){
console.log('我说话了');
}
</script>
</body>
</html>
4)props的简写方法
将propTypes 与 defaultProps 写入类中
引入 static propTypes 与 static defaultProps
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>3_props的简写</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test1"></div>
<div id = "test2"></div>
<div id = "test3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//1.创建组件
class Person extends React.Component{
//对标签属性进行类型、必要性的限制
static propTypes = {
name:PropTypes.string.isRequired, //限制标签内的name属性，必传，且为字符串
age:PropTypes.number, //限制标签内的age属性，且为数字
sex:PropTypes.string,//限制标签内的sex属性，且为字符串
speak:PropTypes.func,//限制标签内的speak属性，且为函数
}
//指定默认标签属性值
static defaultProps ={
sex:'男', //sex默认值为男
age:22, //age默认值为22
}
render(){
// console.log(this);
//用结构赋值的方式，提前从props上拿到属性
const {name,age,sex} = this.props
//props是只读的
// this.props.name = 'jack' //此行代码会报错，因为props是只读的
return(
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person name='tom' age={19} sex='男'/>,document.getElementById('test1'))
ReactDOM.render(<Person name='to' speak='{speak}'/>,document.getElementById('test2'))
// ReactDOM.render(<Person name='tm' age='22' sex='男'/>,document.getElementById('test3'))
//批量传递标签属性
const p = {name:'老刘',age:18,sex:'女'}
// console.log('@',...p);
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
function speak(){
console.log('我说话了');
}
</script>
</body>
</html>
5)props与构造器
研究使用构造器时，构造器中与super中写不写props的差异
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>4_props与构造器</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test1"></div>
<div id = "test2"></div>
<div id = "test3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//1.创建组件
class Person extends React.Component{
constructor(props){
//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
// console.log(props);
super(props)
console.log('constructor',this.props);
}
//对标签属性进行类型、必要性的限制
static propTypes = {
name:PropTypes.string.isRequired, //限制标签内的name属性，必传，且为字符串
age:PropTypes.number, //限制标签内的age属性，且为数字
sex:PropTypes.string,//限制标签内的sex属性，且为字符串
}
//指定默认标签属性值
static defaultProps ={
sex:'男', //sex默认值为男
age:22, //age默认值为22
}
render(){
// console.log(this);
//用结构赋值的方式，提前从props上拿到属性
const {name,age,sex} = this.props
//props是只读的
// this.props.name = 'jack' //此行代码会报错，因为props是只读的
return(
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person name='tom' age={19} sex='男'/>,document.getElementById('test1'))
</script>
</body>
</html>
6)函数式组件使用props
研究函数式组件如何使用props
以及如何进行限制与默认值设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>4_函数式组件使用props</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test1"></div>
<div id = "test2"></div>
<div id = "test3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// //1.创建组件
// class Person extends React.Component{
// //对标签属性进行类型、必要性的限制
// static propTypes = {
// name:PropTypes.string.isRequired, //限制标签内的name属性，必传，且为字符串
// age:PropTypes.number, //限制标签内的age属性，且为数字
// sex:PropTypes.string,//限制标签内的sex属性，且为字符串
// }
// //指定默认标签属性值
// static defaultProps ={
// sex:'男', //sex默认值为男
// age:22, //age默认值为22
// }
// render(){
// // console.log(this);
// //用结构赋值的方式，提前从props上拿到属性
// const {name,age,sex} = this.props
// //props是只读的
// // this.props.name = 'jack' //此行代码会报错，因为props是只读的
// return(
// <ul>
// <li>姓名：{name}</li>
// <li>年龄：{age+1}</li>
// <li>性别：{sex}</li>
// </ul>
// )
// }
// }
function Person(props){
const {name,age,sex} = props
return(
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
)
}
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name:PropTypes.string.isRequired, //限制标签内的name属性，必传，且为字符串
age:PropTypes.number, //限制标签内的age属性，且为数字
sex:PropTypes.string,//限制标签内的sex属性，且为字符串
}
//指定默认标签属性值
Person.defaultProps ={
sex:'男', //sex默认值为男
age:22, //age默认值为22
}
//2.渲染组件到页面
ReactDOM.render(<Person name='tom' sex='男'/>,document.getElementById('test1'))
</script>
</body>
</html>
7)总结
理解：
a. 每个组件对象都会有props(properties的简写)属性
b. 组件标签的所有属性都保存在props中
作用：
a. 通过标签属性从组件外向组件内传递变化的数据
b. 注意: 组件内部不要修改props数据
编码操作：
a. 内部读取某个属性值
this.props.name
b. 对props中的属性值进行类型限制和必要性限制
第一种方式（React v15.5 开始已弃用）：
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
}
c.扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
d.默认属性值
Person.defaultProps = {
age: 18,
sex:'男'
}
e.组件类对构造函数
constructor(props){
super(props)
console.log(props)//打印所有属性
}
3.ref
1)字符串形式的ref
最简单的形式
代码过多时，影响效率
过时的API，不建议使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>1_字符串形式的ref</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = () => {
const {input1} = this.refs
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = () => {
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<input ref='input1' type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧对数据</button>
<input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
// onBlur 属性在元素失去焦点时触发
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
//string类型的ref，存在一些效率问题，已经过时，不推荐使用
</script>
</body>
</html>
2)回调函数形式的ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>2_回调函数形式的ref</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//回调函数：1.自己定义的函数 2.自己没有调用 3.这个函数最终执行了
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = () => {
const {input1} = this
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = () => {
const {input2} = this
alert(input2.value)
}
render(){
// 把ref当前所处的节点 <input>，挂在实例自身上，并取名为input1
return(
<div>
<input ref={(currentNode) => {this.input1 = currentNode}} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧对数据</button>
<input ref={(currentNode) => {this.input2 = currentNode}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
// onBlur 属性在元素失去焦点时触发
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
3)在回调形式的ref中，回调执行次数的问题
研究在回调形式的ref中，回调执行次数的问题
内联的形式与类的绑定形式ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>3_回调ref中回调执行次数的问题</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Demo extends React.Component{
state = {isHot:true}
showInfo = () => {
const {input1} = this
alert(input1.value)
}
changeWeather = () => {
//获取原来的状态
const{isHot} = this.state
//更新状态
this.setState({isHot:!isHot})
}
saveInput = (c) => {
this.input1 = c
console.log('@',c);
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
{ /* <input ref={(currentNode) => {this.input1 = currentNode;console.log('@',currentNode);}} type="text"/> <br/><br/> */ }
<button onClick={this.showInfo}>点我提示输入的数据</button>
<input ref={this.saveInput} type="text" />
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
-
createRef
最新的API，官网推荐使用 myRef = React.createRef() React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点 该容器是专人专用的，只能存储一个。 实际使用需要大量容器，代码重复率高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>4_createRef</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点;该容器是专人专用的，只能存储一个。
myRef = React.createRef()
showData = () => {
alert(this.myRef.current.value)
}
render(){
return(
<div>
<input ref={this.myRef} type="text" />
<button onClick={this.showData}>点我提示输入的数据</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
4. React事件处理
1. 通过onXxx属性指定事件处理函数(注意大小写)
1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———— 为了更好的兼容性
2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ———— 为了高效
2. 通过event.target得到发生事件的DOM元素对象 ———— 不要过度使用ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//创建ref容器
myRef = React.createRef()
showData = () => {
alert(this.myRef.current.value)
}
showData2 = (event) => {
alert(event.target.value)
}
render(){
return(
<div>
<input ref={this.myRef} type="text" />
<button onClick={this.showData}>点我提示输入的数据</button>
<input onBlur={this.showData2} type="text" />
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
3.1 收集用户表单数据
需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息
1）非受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>1_非受控组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component{
handleSubmit = (event) => {
//阻止表单提交
event.preventDefault()
const{username,password} = this
alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
}
render(){
return(
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名：<input ref={(c) => {this.username = c}} type="text" name='username'/>
密码：<input ref={(c) => {this.password = c}} type="password" name='password'/>
<button>登陆</button>
</form>
)
}
}
//渲染组件到页面
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
2）受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>2_受控组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"> </script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component{
//初始化状态
state ={
username:'',
password:''
}
//保存用户名到状态中
saveUsername = (event) => {
// console.log(event.target.value);
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event) => {
// console.log(event.target.value);
this.setState({password:event.target.value})
}
handleSubmit = (event) => {
//阻止表单提交
event.preventDefault()
const{username,password} = this.state
alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}
render(){
return(
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name='username'/>
密码：<input onChange={this.savePassword} type="password" name='password'/>
<button>登陆</button>
</form>
)
}
}
//渲染组件到页面
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
1432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
