回调形式的ref（推荐使用）

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入 rop-types.js 用于对属性标签属性进行限制 -->
    <script src="https://unpkg.com/[email protected]/prop-types.js"></script>

    <!-- 引入 babel, 用于将 jsx 转为 js -->
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- 此处一定要写 babel -->
    <script type="text/babel">
        
        /*
        回调形式的ref（推荐使用）
        */
        class Demo extends React.Component {

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

            showData2 = ()=> {
                const {input2} = this
                alert(input2.value)
            }

            render() {
                return (
                    <div>
                        <input ref={(currentNode) => {this.input1 = currentNode} } type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" palceholder="失去焦点提示数据" />
                    </div>
                )
            }

        }

        ReactDOM.render(<Demo/>, document.getElementById('test'))

    </script>