--------------------------------------------------------
获取某个元素
	1. 跟原生js一样，直接通过 querySelector
	2. <div ref="div1"></div>
		获取:  this.refs.div1
	3. ev.target	当前操作元素本身

ref  注意:
	1. this.refs.xxx  字符串形式，目前为止(2018-4-13) 还可以使用，但是官方已经不推荐
	2. 官方更加推荐使用 	回调函数		√
		ref={(input)=>this.input=input}
<input ref="xxxx" />

点击按钮，让input聚焦:



ref 不仅可以加给React元素，还可以加给 组件

--------------------------------------------------------
<script type="text/babel">
    class Demo extends React.Component{
        fnFocus = () =>{
            this.refs.input.focus();
        }
        render(){
            return (<div>
                <input type="text" ref="input"/>
                <input type="button" value="按钮" onClick={this.fnFocus}/>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>


<script type="text/babel">
    class Demo extends React.Component{
        fnFocus = () =>{
            this.input.focus();
        }
        render(){
            return (<div>
                <input type="text" ref={(input)=>this.input=input}/>
                <input type="button" value="按钮" onClick={this.fnFocus}/>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class Demo extends React.Component{
        fnFocus = () =>{
            this.b.focus();
        }
        render(){
            return (<div>
                <input type="text" ref={(a)=>this.b=a}/>
                <input type="button" value="按钮" onClick={this.fnFocus}/>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class TextInput extends React.Component{
        show(){
            console.log('这是子组件里面的东西')
        }
        render(){
            return (<div>
                <input type="text"/>
            </div>)
        }
    }
    class Demo extends React.Component{
        componentDidMount(){
            //获取到 TextInput
            this.textInput.show();
        }
        render(){
            return (<div>
                <TextInput ref={(textInput)=>this.textInput = textInput} />
            </div>)
        }
    }
    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class TextInput extends React.Component{
        constructor(){
            super();
            this.state = {
                msg:'xxxx'
            };
        }
        show(){
            console.log(this.state.msg);
            console.log('这是子组件里面的东西')
        }
        render(){
            return (<div>
                <input type="text"/>
            </div>)
        }
    }
    class Demo extends React.Component{
        componentDidMount(){
            //获取到 TextInput
            this.textInput.show();
        }
        render(){
            return (<div>
                <TextInput ref={(textInput)=>this.textInput = textInput} />
            </div>)
        }
    }
    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class TextInput extends React.Component{
        constructor(){
            super();

            this.state = {
                msg:'xxxx'
            };
        }
        show(){
            console.log(this.state.msg);
            console.log('这是子组件里面的东西')
        }
        hide(){
            this.input.style.display='none';
        }
        render(){
            return (<div>
                <input type="text" ref={(input)=>this.input=input}/>
            </div>)
        }
    }
    class Demo extends React.Component{
        componentDidMount(){
            //获取到 TextInput
            this.textInput.show();
        }
        handleClick = () =>{
            this.textInput.hide();
        }
        render(){
            return (<div>
                <TextInput ref={(textInput)=>this.textInput = textInput} />
                <input type="button" value="隐藏" onClick={this.handleClick}/>
            </div>)
        }
    }
    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>