React 组件实例的三大核心—refs

0x00 前言

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

文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取

0x01 字符型的refs

refs就是document中的id

1.获取ref

class Demo extends React.Component {
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input type="text" placeholder="点击按钮提示数据" />
                    </div>
                )
            }

            showData = () => {
                console.log(this.refs.input1)
            }
        }

        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

2.结构赋值

   <script type="text/babel">
        class Demo extends React.Component {
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} type="text" placeholder="点击按钮提示数据" />
                    </div>
                )
            }

            showData = () => {
                const {input1} = this.refs
                alert(input1.value)
            }

            showData2=()=>{
                
            }
        }

        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

3.字符串类型的refs 过时的原因

• 效率不高

0x02 回调函数的refs

1.实现

<script type="text/babel">
        class Demo extends React.Component {
            render() {
                return (
                    <div>
                        <input ref={c=>this.input1 = c} type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref={c=>this.input2 = c}  onBlur={this.showData2} type="text" placeholder="点击按钮提示数据" />&nbsp;
                    </div>
                )
            }

            showData = () => {
                const {input1} = this
                alert(input1.value)
            }

            showData2=()=>{
                const {input2} =this
                alert(input2.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

2.调用次数

更新状态后，组件会填充为null，然后再进行调用

    <script type="text/babel">
        class Demo extends React.Component{

            state={isHot:false}

            render(){
                const {isHot} =this.state
                return (
                    <div>
                        <h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
                        <input ref= {(c)=>{this.input1=c;console.log(c)}} type="text"/>
                        <br/>
                        <br/>
                        <button onClick={this.showInfo}>点我提示输入的数据</button> 
                        <button  onClick={this.changeWeather}>点我切换天气</button>   
                    </div>
                )
            }

            showInfo = ()=>{
                const {input1} =this
                alert(input1.value)
            }

            changeWeather =()=>{
                const {isHot} =this.state
                this.setState({isHot:!isHot})
            }
        }

        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
31
32

3.类绑定的方式

<script type="text/babel">
        class Demo extends React.Component{

            state={isHot:false}

            render(){
                const {isHot} =this.state
                return (
                    <div>
                        <h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
                        {/* {this.input1=c;console.log(c)}} type="text"/>*/}
                        <input ref= {this.saveInput} type="text"/>
                        <br/>
                        <br/>
                        <button onClick={this.showInfo}>点我提示输入的数据</button> 
                        <button  onClick={this.changeWeather}>点我切换天气</button>   
                    </div>
                )
            }

            saveInput = (c)=>{
                this.input1=c;
                console.log(c)
            }

            showInfo = ()=>{
                const {input1} =this
                alert(input1.value)
            }

            changeWeather =()=>{
                const {isHot} =this.state
                this.setState({isHot:!isHot})
            }
        }

        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
31
32
33
34
35
36
37
38

0x03 createRef

React.createRef 是专人专用的，每一个ref都要单独重新创建

1.创建实例

<script type="text/babel">
        class Demo extends React.Component{

            myRef = React.createRef()

            state={isHot:false}

            render(){
                const {isHot} =this.state
                return (
                    <div>
                        <input ref= {this.myRef} type="text"/>
                        <br/>
                        <br/>
                        <button onClick={this.showInfo}>点我提示输入的数据</button>  
                    </div>
                )
            }

            showInfo = ()=>{
                alert(this.myRef.current.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

other

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

以上