- 通过onXxx属性指定事件处理函数(注意大小写)
- React使用的自定义(合成)事件,而不是使用的原生DOM事件——为了更好的兼容性
- React中的事件是通过事件委托的方式处理的(委托给最外层的元素)——为了高效
- 通过
event.target
得到发生事件的DOM元素对象,也就是发生事件的元素正好是要操作的元素,可以不使用ref——勿过度使用Ref
收集表单数据
非受控组件:现用现取
class Login extends React.component{
handleSubmit=e=>{
alert(this.username.value)
e.preventDefault();//阻止默认提交事件
}
render(){
return (
<form action="xxx" onSubmit={this.handleSubmit}>
用户名:<input type="text" name="username" ref={c=>this.username=c}>
密码:<input type="password" name="password" ref={c=>this.password=c}>
<button type="submit">登录</button>
</form>
)
}
}
受控组件(建议):页面中所有输入类DOM随着输入维护到状态中
state={
username:''
}
saveUsername=event=>{
this.setState({username:event.target.value})
}
handleSubmit=()=>{
alert(this.state.username)
}
render(){
return(
<div>
<input onChange={this.saveUsername} type="text" />
<button onClick={this.handleSubmit}>点击</button>
</div>
)
}
高阶函数_函数柯里化
saveFormData=dataType=>{
return event=>{
this.setState({[dataType]:event.target.value})
}
}
render(){
return(
<div>
<input onChange={this.saveFormData('username')} type="text" />
<input onChange={this.saveFormData('password')} type="text" />
</div>
)
}
高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数
- 若A函数,接收的参数是一个函数,那么A就可以称为高阶函数
- 若A函数,被调用的返回值依然是一个函数,那么A就可以称为高阶函数
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数,最后统一处理的函数编码形式。
常见的高阶函数:Promise,setTimeout,map()等
//函数柯里化的形式
function sum(a){
return b=>{
return c=>{
return a+b+c;
}
}
}
const result=sum(1)(2)(3)
console.log(result) //输出结果:6