0x00 前言
文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取
0x01 React中的事件处理
1.事件处理
通过onX指定,需要将函数大写,为了更好的兼容性,通过事件委托的方式进行实现。
2.当前节点调用event
<script type="text/babel">
class Demo extends React.Component{
myRef = React.createRef()
myRef2 = React.createRef()
state={isHot:false}
render(){
const {isHot} =this.state
return (
<div>
<input ref= {this.myRef} type="text"/>
<button onClick={this.showInfo}>点我提示输入的数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
showInfo = ()=>{
alert(this.myRef.current.value)
}
showData2=(event)=>{
alert(event.target.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
3.收集表单数据
3.1 非受控组件
现用现取
<script type="text/babel">
class Login extends React.Component{
render(){
return(
<div>
<form action="" 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>
</div>
)
}
handleSubmit = (event)=>{
event.preventDefault()
const {username,password} = this
alert(`您输入的账号是${username.value},输入的密码是${password.value}`)
}
}
ReactDOM.render(<Login/>,document.getElementById("test"))
</script>
3.2 受控组件
随着输入进行改变状态就是受控组件。
<script type="text/babel">
class Login extends React.Component{
state={
username:"",
password:""
}
render(){
return(
<div>
<form action="" onSubmit={this.handleSubmit}>
用户名:<input onChange={this.demo} type="text" name="username"/>
密码:<input onChange={this.demo2} type="password" name="password"/>
<button>登录</button>
</form>
</div>
)
}
handleSubmit = (event)=>{
event.preventDefault()
const {username,password} = this.state
alert(`您输入的账号是${username},输入的密码是${password}`)
}
demo = (event) =>{
console.log(event.target.value)
this.setState({username:event.target.value})
}
demo2 = (event) =>{
console.log(event.target.value)
this.setState({password:event.target.value})
}
}
ReactDOM.render(<Login/>,document.getElementById("test"))
</script>
other
欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源,技能树,面试题等。
以上