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

最新推荐文章于 2024-09-05 14:27:59 发布

Wcbddd

最新推荐文章于 2024-09-05 14:27:59 发布

阅读量112

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/HAI_WD/article/details/132866256

版权

React 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

0x00 前言

文中工具皆可关注皓月当空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>

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>

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>

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>

3.类绑定的方式

<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"/>*/}
                        <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>

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>