字符串形式的ref

<div id="test"></div>

        <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 = ()=> {
                    // console.log('showData:', this)
                    const {input1} = this.refs
                    alert(input1.value)
                }

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

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

            }

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

        </script>