## react 里 ref的四种使用方式

1、字符串类型

这个其实是最简单的一种方式，弊端请移步官网！（在条件允许的情况下尽量避免字符串形式的ref！）能不用就不用，没避免用了的也没太大问题“”」

<script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this.refs
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>

 

2、回调函数类型

这个相对字符串的稍微麻烦一点。

<script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>

3、内联的方式（在更新的情况下会调用两次，详细见官网，可以用绑定class的方式规避）

就开发而言，大部分人员用的还是内联的方式；有缺陷但是是无关紧要的！！！

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

            state = {isHot:false}

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

            changeWeather = ()=>{
                //获取原来的状态
                const {isHot} = this.state
                //更新状态
                this.setState({isHot:!isHot})
            }

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

            render(){
                const {isHot} = this.state
                return(
                    <div>
                        <h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
                        {/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
                        <input ref={this.saveInput} type="text"/><br/><br/>
                        <button onClick={this.showInfo}>点我提示输入的数据</button>
                        <button onClick={this.changeWeather}>点我切换天气</button>
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

4、React.createRef的方式

是目前最复杂的一种，但也是react最推荐的一种

 

<script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            /* 
                React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
             */
            myRef = React.createRef()
            myRef2 = React.createRef()
            //展示左侧输入框的数据
            showData = ()=>{
                alert(this.myRef.current.value);
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                alert(this.myRef2.current.value);
            }
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>