React之事件处理（事件委托,⾮受控组件）为什么⽤到事件处理(事件委托)?
在react中，官⽅提⽰：请勿过度使⽤ref , 所以可以通过事件委托来处理
/*
1.通过onXxx属性指定事件处理函数(*注意⼤⼩写)
a.React使⽤的是⾃定义(合成)事件,⽽不是使⽤的原⽣DOM事件
b.React中的事件是通过事件委托⽅式处理的(委托给组件最外层的元素)  ---为了更好的兼容性
2.通过event.target得到发⽣事件的dom元素对象
*/
myRef = ateRef()
myRef2 = ateRef()
showData = ()=>{
console.Ref2.current.value)
}
showData2 = (event)=>{
console.log(event.target);
}
render(){
return (
<div>
<input type="text"ref={Ref}  placeholder="点击提交按钮"/> 
<button onClick={this.showData }>点我输出左边信息</button>
<input type="text" onBlur={this.showData2} ref={Ref2} placeholder="点击提交按钮"/> 
</div>
)
}
}
事件委托是依附在事件冒泡上的，可以通过点击⽗级标签然后根据e.target来到对应的标签来处理
受控组件通过state来进⾏处理
class Demo extends React.Component {
state = {
userName:'',
password:''
}
handleSubmit=(event)=>{
event.preventDefault()
let {userName,password} = this.state
console.log(`您输⼊的⽤户名是:${userName}，您输⼊的密码是:${password}`)
}
saveUserName = (event)=>{
this.setState({userName:event.target.value})
}
savePassword = (event)=>{
this.setState({password:event.target.value})
}
render(){
return (
<form onSubmit={this.handleSubmit}>
⽤户名:<input onChange={this.saveUserName} ref={c=>this.username=c} type="text" name="username"/>
blur事件密码: <input onChange={this.savePassword} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
⾮受控组件现⽤现取
class Demo extends React.Component {
handleSubmit=(event)=>{
event.preventDefault()
console.log(this.username.value)
console.log(this.password.value);
console.log(`您输⼊的⽤户名是:${this.username.value}，您输⼊的密码是:${this.password.value}`)
}
render(){
return (
<form onSubmit={this.handleSubmit}>
⽤户名:<input ref={c=>this.username=c} type="text" name="username"/>
密码: <input ref={c=>this.password =c} type="password" name="password" />            <button>登录</button>
</form>
)
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。