一、绑定事件
在React中 所绑定的事件的名称都是由React提供的 因此 事件名称必须按照一定的规范
名称的首字母必须是大写的(即小驼峰命名法) 例如onClick或onMouseEnter
且在为事件绑定函数的时候 必须用花括号包裹 而不能为字符串类型
例如：
<button onClick={function(){console.log("aaa")}}>click me</button>
但行内式不太方便 可以将函数进行抽离
像这样：
import React from 'react';export default class Hello extends ponent{constructor(){super();this.state={}}render(){return <div>hello<hr/><button onClick={this.myClick}>click me</button></div>}// 组件内部的实例方法myClick(){console.log("aaa")}}
需要注意的是：在调用方法的时候 要用this来指定 因为是在组件的内部调用自己的方法
加上this 代表将组件内的实例方法的引用交给绑定的事件
且不能带有括号()否则当React解析到该方法的调用时 该方法会被直接执行
但更标准的语法是使用【箭头函数】：
箭头函数是匿名的function函数(即没有函数名的函数)
在箭头函数内部 this永远指向外部this 而不是指向调用者 由此避免了一些作用域的问题
像这样：
import React from 'react';export default class Hello extends ponent{constructor(){super();this.state={}}render(){return <div>hello<hr/><button onClick={() => this.myClick()}>click me</button></div>}// 将匿名函数指向myClickmyClick = () => {console.log("aaa")}}
在箭头函数里写入方法的调用
并将方法写成箭头函数的形式 并赋值一个具体的函数名以供调用
还可以传参：
render(){return <div>bindEvent<hr/><button onClick={() => this.myClick("帅哥")}>click me</button></div>}myClick = (arg1) => {console.log("我是" +arg1)}
二、修改state数据
在React中 若想为state中的数据重新赋值 不能使用this.state.xxx=yyy
而应该调用React提供的setState()来修改 比如this.setState({xxx:yyy})
在React中推荐使用this.setState()修改状态值
如下案例 点击按钮修改展示的文本内容：
import React from 'react';export default class Hello extends ponent{constructor(){super();this.state={msg:"Hello World"}}render(){return <div><button onClick={() => this.myClick("帅哥")}>click me</button><hr/><h3>{this.state.msg}</h3></div>}myClick = (arg1) => {this.setState({msg:"Hello "+arg1})}}
需要注意的是：
若state里有多个数据 在setState的时候只会将对应的state状态更新 而不会覆盖原本的其它state状态this.setState()方法是异步执行的 但支持回调函数
在方法后添加一个回调函数作为参数即可：this.setState({},callback())
三、数据绑定
在React中 可以绑定文本框与state的值
但只支持单向数据绑定即state中的值的改变会实时更新到页面上
但页面上的值的改变不会实时改变state中的值
若只是将state数据绑定给文本框 却不设置onChange处理函数 那么文本框将会是个只读的文本框无法输入任何数据
当为文本框绑定value值后 要么提供readOnly只读属性 要么提供onChange处理函数
import React from 'react';export default class Hello extends ponent{constructor(){super();this.state={msg:"Hello World"}}render(){return <div>bindEvent<hr/><button onClick={() => this.myClick("帅哥😎")}>click me</button><hr/><h3>{this.state.msg}</h3><hr/><input type="text" value={this.state.msg} onChange={() => this.inputChanged()}/></div>}// 每当文本框内容改变 即调用该方法inputChanged = () => {console.log("dsadsad")}// 将匿名函数指向myClickmyClick = (arg1) => {console.log("我是" +arg1)this.setState({msg:"Hello Piconjo"+arg1},function(){console.log(this.state.msg)})}}
React并没有这种页面上的值实时反馈到state中的自动同步机制
为了实现该功能 在React中 需要手动监听文本框的onChange事件 然后在事件中拿到最新的文本框内的值 然后自己调用this.setState()方法手动将最新的值同步到state中
1、手动监听文本框的onChange事件
<input type="text" value={this.state.msg} onChange={() => this.inputChanged()}/>inputChanged = () => {console.log("dsadsad")}
2、在事件中拿到最新的文本框内的值
有两种方法可以实现：
方法一：通过事件参数e
用e.target.value获取value属性
<input type="text" value={this.state.msg} onChange={(e) => this.inputChanged(e)}/>inputChanged = (e) => {console.log(e.target.value)}
方法二：通过ref引用
React和Vue一样 支持refref即元素的引用(reference)
只不过在React中 获取ref时 无需加上美元符号$
像这样即可：this.refs.引用名
给元素添加引用：
<input type="text" value={this.state.msg} onChange={() => this.inputChanged()} ref="input"/>inputChanged = () => {console.log(this.refs.input.value)}
3、手动将最新的值同步到state中
inputChanged = (e) => {console.log(e.target.value)console.log(this.refs.input.value)this.setState({msg:e.target.value})}
这样 即可实现双向数据绑定了
(用React的话 实现数据双向绑定会麻烦写 需要自己实现部分功能
Vue的v-model自带了双向数据绑定 用习惯了再用React刚开始确实会有些难受…)
