使用createRef API 创建ref

1： 使用createRef api 创建 ref 

<script type="text/babel">  // 一定要写 text/babel  就是将jsx 的语法转化js 语法
  // 使用 class 关键字创建组件
  class Demo React.Component {
    // React.createaRef() 调用之后返回一个容器, 该容器是可以存储ref 标识节点。
    // 该容器是专人专用, 每一个ref 标识都需要使用单独的一个

    myRef = React.createRef();
    myRef = React.createRef();
    // 显示左侧输入框
    showData = () => {
      alert(this.myRef.current.value);  可以拿到弹框里边值
    }
    
   使用类创建组件必须要使用render 函数
   render() {
     return {
      <div>
       <input ref="{this.myRef}" type="text" palcehodler="点击按钮显示数据"></input> 
       // 但是在 React 中 不需要操作dom 节点可以使用 ref 属性;
       <input ref="input" type="text" palcehodler="点击按钮显示数据"></input>
       <button onClick="{this.showData}">点击显示左侧数据</button>
       <input type="text" placehoder="失去焦点显示数据"></input>
     </div>
     }
   }
  }
</script>
--------------------------------------------------------------
总结使用 ref
1： 字符串形式的ref React 官方不推荐使用。 
2： 推荐使用回调函数形式的
3:  或者使用 React.createRef() 形式创建Ref 格式。
内联函数形式会执行两次: ref 形式会执行两次。
使用class 类样式  就不会调用两次。

--------------------------------------------------------------------------------------------

React 框架中事件处理：

在React 定义事件规则；
1: 通过 onXxx 属性指定事件处理函数(注意大小写); 
   在原生事件中 onclick on后边的click 可以小写。 但是在React 框架中on 后边的事件名称必须大写。
   在React 框架为什么要使用自定义事件; React 自定义事件也是在原生上进一步封装。
   (为了更好的兼容性, 原生事件有一定的局限性)
   
2: 在React 事件中使用的是自定义(合成)事件, 而不是使用原生DOM事件
3: React 事件中是通过事件委托的方式处理的  (委托给组件最外层的元素)  (事件冒泡原理 为了更加高效)
 
4：通过event.target 得到的发生事件的DOM 元素对象。
-------------------------------------------------
<scirpt type="text/babel">  使用babel 语句就是将jsx 语法转化js 语法
  // 使用class 类创建组件 但是使用类创建组件 必须要大些
  使用关键字继承 父组件 React.Component {}
  class Demo extends React.Component {
    // 显示右侧输入数据
    showData = (event) => {
       console.log(event.target.value);
    }

    render() {     // 必须要有render函数  必须要有返回值
      return {
         // return 返回值中书写jsx 语法
        <div>
           <input onBlur={this.showData}></input>
        </div> 
       }
    }
  }

</script>