React中的事件处理

0x00 前言

• CTF 加解密合集
• CTF Web合集
• 网络安全知识库
• 溯源相关

文中工具皆可关注 皓月当空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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

other

欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源，技能树，面试题等。

以上