开发者学堂课程【React 入门与实战：React 中绑定文本框与 State 中的值】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8119
React 中绑定文本框与 State 中的值
内容简介：
一、//#region+//#endregion注释格式
二、React中绑定数据的流程
三、绑定文本框的值
一、//#region+//#endregion 注释格式
在 React 中，如果代码篇幅过长需要注释代码，但被注释的代码不能被折叠了，又想要把它折叠起来，可以使用下面的方法。
在 Visual Studio Code 中提供了一个新的注释格式，使用//#region (区间开始)和//#endregion (区间结束)，区间中可以放想要折叠的代码，把代码放在其中就可以折叠了。
如上操作折叠起来除了三个点，里面什么都没有，可以在里面取一个名字，再折叠起来就会显示介绍。
例如:
例一：(介绍 React 中绑定事件的标准格式)
//#region 介绍 React 中绑定事件的标准格式
//import React from 'react'
//export default class BindEvent extends React.Componet{
//constructor(){
//super()
//this.state={}
//}
//render(){
//return
//this.show('
','')}>按钮
//
//
//}
//show=(arg1,arg2)=>{
//console.log('show方法被调用了'+arg1+arg2)
//}
//}
//#endregion
折叠后的效果如下：
//#region 介绍 React 中绑定事件的标准格式…
例二：(绑定事件，并在事件处理函数中，使用 this.setState)
//#region 绑定事件，并在事件处理函数中，使用 this.setState
//import React from 'react'
//export default class BindEvent extends React.Component{
//constructor() {
//super()
//this.state = {
//msg: '哈哈',
//name:'zs',
//age:22,
//gender:'男'
//}
//}
//render(){
//return
//this.show('','')}>按钮
//
{this.state.msg}
//
//}
//show =(arg1,arg2)=>{
//
//console.log('show方法被调用了'+arg1+arg2)
//
//注意：React 中，如果想为 state 中的数据，重新赋值，不要使用 this.state.***=值
//应该调用 React 提供的 this.setState({msg:'123'})
//this.state.msg='oooooo'
//在 React 中，推荐使用 this.setState({})修改状态值
// this.setState({
//
//在 setState,只会把对应的 state 状态更新，而不会覆盖其它的 state 状态
//msg:'123'+arg1+arg2
//},fuction(){//回调
//console.log(this.state.msg)
//
})
//注意：this.setState 方法的执行是异步的；
//如果大家在调用完 this.setState 之后，又想立即拿到最新的 state 值，需要使用 this.setState({},callback)
//}
//}
//#endregion
折叠后的效果如下：
//#region 绑定事件，并在事件处理函数中，使用 this.setState…
二、React中绑定数据的流程
(1)默认情况下，在 React 中，如果页面上的表单元素，绑定了 state 上的状态值，那么，每当 state 上状态值变化，必然会自动把最新的状态值，自动同步到页面上。
单向数据流(状态变化 -> 自动更新页面)。
(2)UI 页面上，文本框的内容变化了，想要把最新的值，同步回 state 中，此时 React 没有这种自动同步机制。
在 React 中，需要程序员手动监听文本框的 onChange 事件；在 onChange 事件中，拿到最新的文本框的值；程序员调用 this.setState({})手动把最新的值同步到 state 中。
详解如下图：
单向的数据流:从状态自动同步到页面。
双向数据流:在Vue中，通过v-model来实现从状态改变自动同步到页面，在页面上修改的数据又会自动同步到状态中。
介绍React中绑定事件的标准格式,onClick中，加箭头函数（=>）和方法的调用(this.show()),实现多个参数的传输；处理函数需要定义为句名的箭头函数(show=(arg1,arg2)=>{}),原本是没有名称的，可以使用等号(=)来赋予名称。
代码如下：
import React from 'react'
export default class BindEvent extends React.Componet{
constructor(){
super()
this.state={}
}
render(){
return
this.show('','')}>按钮
}
show=(arg1,arg2)=>{
console.log('show方法被调用了'+arg1+arg2)
}
}
三、绑定文本框的值
(1)创建文本框
在页面上加一个文本框，可使用以下代码：
"text" style={{width:'100%'}}/>
(2)数据绑定
上述代码只生成了一个文本框，为了把文本框的 value 值和状态上的 msg 属性进行数据绑定，所以可以修改代码，实现数据的绑定。
代码如下：
"text" style={{width:'100%'}} value={this.stat
e.msg}/>
如果只把文本框的 value 属性绑定到了 state 状态，但不提供 onChange 处理函数，得到的文本框，将会是一个只读的文本框。还会报警告。
当为文本框绑定 value 值以后，要么同时提供一个 readOnly ,要么提供一个 onChange 处理函数。
this.txtChange()} />
每当文本框中监听到文本变化，便会触发 onChange 事件。接着调用箭头函数，然后调用 this.txtChanged()函数。
每当文本框的内容变化了，必然会调用这个 this.txtChanged。
在 onChange 事件中，获取文本框的值。
有两种方案：
方案一：
通过事件参数 e 来获取。当触发 input 事件，必将调用箭头函数，在箭头函数的形参中应该有参数 e ,那么在调用 txtChanged 函数时，需要把参数 e 传过去; e.target的源为触发事件 input 文本框，所以要得到 value 值，直接.value 获取，一按键盘最新的 value 值就会被输出。
代码如下：
'100%'}} value={this.state.msg}
onChange={(e)=>this.txtChanged(e)}/>
txtChanged=(e)=>{
console.log(e.target.value)
}
方案二：
通过 refs 来获取。和 Vue 中差不多，Vue 为界面上的元素提供了 def 的属性，如果想要获取元素引用，则需要使用 this.$refs.引用名称；在 React 中，也有 ref,如果要获取元素的引用 this.refs.引用名称。
两者的区别在于，Vue 中有$,而 React 中没有$。
this.refs.txt 获取的是文本框，所直接使用 this.refs.txt.value 可获取文本框中的值
'100%'}} value={this.state.msg}
onChange={(e)=>this.txtChanged(e)} ref="txt"/>
txtChanged=(e)=>{
console.log(this.refs.txt.value)
}
(3)同步数据
上述完成后，程序员需要调用 this.setState({})手动把最新的值同步到 state 中，只要同步回去了，状态是最新的，再把状态同步到页面上，就实现了数据的绑定。
调用 this.setState 为 msg 赋值，页面上的值得到了同步。
const newVal = e.target.value
this.setState({
msg:newVal
})
完整代码，如下：
import React from 'react'
export default class BindEvent extends React.Component{
constructor() {
super()
this.state = {
msg: '哈哈',
name:'zs',
age:22,
gender:'男'
}
}
render(){
return
this.show('','')}>按钮
{this.state.msg}
.msg}onChange={()=>this.txtChange()} />
}
txtChanged=(e)=>{
const newVal = e.target.value
this.setState({
msg:newVal
})
}
show = (arg1,arg2)=>{
}
}
