<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">
        
        /*
        createRef
        */
        class Demo extends React.Component {

            /*
            React.createRef 调用后返回一个容器，该容器可以存储被ref所标识的节点
            */
            input1 = React.createRef()
            input2 = React.createRef()

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

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

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

        }

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

    </script>