學習視訊：https://www.bilibili.com/video/BV1wy4y1D7JT?p=27

一、字串形式的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>

二、回撥函式形式的ref

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

三、createRef

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