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 <div>
// <button onClick={()=> this.show('
','')}>按钮
// </button>
// </div>
// }
// 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<div>
// <button onClick={() => this.show('','')}>按钮</button>
// <h3>{this.state.msg}</h3>
// </div>
// }
// 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 <div>
<button onClick={()=> this.show('','')}>按钮
</button>
</div>
}
show=(arg1,arg2)=>{
console.log('show方法被调用了'+arg1+arg2)
}
}
三、绑定文本框的值
(1)创建文本框
在页面上加一个文本框，可使用以下代码：
<input type="text" style={{width:'100%'}}/>
(2)数据绑定
上述代码只生成了一个文本框，为了把文本框的value值和状态上的msg属性进行数据绑定，所以可以修改代码，实现数据的绑定。
代码如下：
<input type="text" style={{width:'100%'}} value={this.stat
e.msg}/>
如果只把文本框的value属性绑定到了state状态，但不提供onChange处理函数，得到的文本框，将会是一个只读的文本框。还会报警告。
当为文本框绑定value值以后，要么同时提供一个readOnly,要么提供一个onChange处理函数。
<input type="text" style={{width:'100%'}} value={this.state.msg} readOnly/>
<input type="text" style={{width:'100%'}} value={this.state.msg} onChange={()=>this.txtChange()} />
每当文本框中监听到文本变化，便会触发onChange事件。接着调用箭头函数，然后调用this.txtChanged()函数。
每当文本框的内容变化了，必然会调用这个this.txtChanged。
在onChange事件中，获取文本框的值。
有两种方案：
方案一：
通过事件参数e来获取。当触发input事件，必将调用箭头函数，在箭头函数的形参中应该有参数e,那么在调用txtChanged函数时，需要把参数e传过去;e.target的源为触发事件input文本框，所以要得到value值，直接.value获取，一按键盘最新的value值就会被输出。
代码如下：
<input type="text" style={{width:'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可获取文本框中的值。
<input type="text" style={{width:'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<div>
<button onClick={() => this.show('','')}>按钮</button>
<h3>{this.state.msg}</h3>
<input type="text" style={{width:'100%'}}value={this.state
.msg}onChange={()=>this.txtChange()} />
</div>
}
txtChanged=(e)=>{
const newVal = e.target.value
this.setState({
msg:newVal
})
}
show = (arg1,arg2)=>{
}
}
