1、React的事件处理
（1）通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件，而不是使用的是原生的DOM事件---为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)----为了高效
（2）通过event.target得到发生事件的DOM元素对象-----不要过度使用ref
javascript
<div id="test"></div>
<script>
class Demo extends React.Component{
const { inputRef1 } = this
showData=()=>{
alert(inputRef1.value)
}
showData2=(e)=>{
alert(e.target.value)
}
render(){
return (
<input type="text" ref={ this.inputRef1 } />
<button onClick={ showData }>展示</button>
<input type="text" onBlur={ showData2 }/>
)
}
}
ReactDOM.render( <Demo />,document.getElementById("test") )
</script>由于第二个输入框的失焦事件是发生在它本身上的，可以利用绑定的事件的e.target,来获取它的DOM，从而获取数据
2、非受控组件
javascript
<div id="test"></div>
<script>
class Demo extends React.Component{
showData=(e)=>{
e.preventDefault() //阻止表单提交，默认刷新页面
alert( this.username.value,this.passward.value )
}
render(){
return (
<form>
用户名：<input type="text" ref={ c=>this.username = c } name="username" />
密码：<input type="passward" ref={ c=>this.passward = c } name="passward"/>
<button onClick={ showData }>提交</button>
</form>
)
}
}
ReactDOM.render( <Demo />,document.getElementById("test") )
</script>这种在使用时获取数据的组件就是非受控组件
3、受控组件
javascript
<div id="test"></div>
<script>
class Demo extends React.Component{
state={
username:"",
passward:""
}
saveUserName=(e)=>{
this.setState({ username:e.target.value })
}
savePassward=(e)=>{
this.setState({ passward:e.target.value })
}
showData=(e)=>{
e.preventDefault() //阻止表单提交，默认刷新页面
alert( this.state.username,this.state.passward )
}
render(){
return (
<form onClick={ showData }>
用户名：<input type="text" onChange={ this.saveUserName } name="username" />
密码：<input type="passward" onChange={ this.savePassward } name="passward"/>
<button>提交</button>
</form>
)
}
}
ReactDOM.render( <Demo />,document.getElementById("test") )
</script>页面上所有输入类的DOM，随着你的输入，就会把内容更新到状态state里，等到你使用的时候，可以直接从state里获取，类似于Vue的数据双向绑定，这就是受控组件。
4、高阶函数及函数柯里化
高阶函数
1、若函数A，接收的参数是一个函数，那么A就可以称之为高阶函数
2、若函数A，调用的返回值依然是一个函数，那么A也是高阶函数
如Promise、setTimeout、arr.map等
函数柯里化
通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式
对3部分进行优化
javascript
<div id="test"></div>
<script>
class Demo extends React.Component{
state={
username:"",
passward:""
}
//保存表单数据到状态中
saveFormData=(dataType)=>{
return ( event )=>{
this.setState({ [dataType]:event.target.value })
}
}
showData=(e)=>{
e.preventDefault() //阻止表单提交，默认刷新页面
alert( this.state.username,this.state.passward )
}
render(){
return (
<form onClick={ showData }>
用户名：<input type="text" onChange={ this.saveFormData('username') } name="username" />
密码：<input type="passward" onChange={ this.saveFormData('passward') } name="passward"/>
<button>提交</button>
</form>
)
}
}
ReactDOM.render( <Demo />,document.getElementById("test") )
</script>解释
当 React 渲染这行代码时：
html
<input type="text" onChange={this.saveFormData('username')} name="username" />1、首先执行 this.saveFormData('username')：把字符串 'username' 传给 saveFormData 的 dataType 参数；
此时 saveFormData 函数开始执行：
javascript
saveFormData = (dataType) => { // 此时 dataType = 'username'
return (event) => { // 这行只是「返回一个函数」，内层函数还没执行
this.setState({ [dataType]: event.target.value })
}
}执行结果：saveFormData('username') 执行后，返回了一个「待执行的内层函数」 （这个内层函数被赋值给了输入框的 onChange 属性）；
2、你在输入框输入内容，触发 onChange 事件
当你在用户名输入框敲入「张三」时，输入框的 change 事件被触发：
React 会自动调用 onChange 上绑定的「内层函数」，并把「事件对象 event」传给这个内层函数；
此时内层函数开始执行，执行的代码是
javascript
(event) => {
// event.target 就是当前输入框元素，event.target.value 就是你输入的「张三」
// [dataType] 是 ES6 计算属性名，等价于「username」
this.setState({ username: '张三' })
}5、不用柯里化的写法
html
<div id="test"></div>
<script>
class Demo extends React.Component{
state={
username:"",
passward:""
}
//保存表单数据到状态中
saveFormData=(dataType,event)=>{
this.setState({ [dataType]:event.target.value })
}
showData=(e)=>{
e.preventDefault() //阻止表单提交，默认刷新页面
alert( this.state.username,this.state.passward )
}
render(){
return (
<form onClick={ showData }>
用户名：<input type="text" onChange={(event)=> { this.saveFormData('username',event) } } name="username" />
密码：<input type="passward" onChange={(event)=> { this.saveFormData('passward',event) } } name="passward"/>
<button>提交</button>
</form>
)
}
}
ReactDOM.render( <Demo />,document.getElementById("test") )
</script>
html
<input type="text" onChange={ event=> this.saveFormData('username',event) } name="username" />