Refs与事件处理

字符串形式的ref(官方开始不支持了)

//创建组件
class Demo extends React.Component{

      showData = ()=>{
            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 ref="buton100" onClick={this.showData}>点我提示数据</button>
                        <input ref="input2" onBlur={this.showData2} type="text"  placeholder="失去焦点提示数据"/>      
                  </div>
            )
      }

}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )

回调函数形式的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 ref= onClick={this.showData}>点我提示数据</button>
                        <input ref={ c=>this.input2=c }  onBlur={this.showData2} type="text"  placeholder="失去焦点提示数据"/>      
                  </div>
            )
      }

}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )

回调ref中回调执行次数的问题

//创建组件
class Demo extends React.Component{

      state = {isHot:true}

      showInfo = ()=>{
            const {input1} = this;
            alert(input1);
      }

      changeWeather = ()=>{
            const {isHot} = this.state
            this.setState({isHot:!isHot})
      }

      saveInput  = (c)=>{
            this.input1=currentNode;
            console.log("@",c);
      }

      render(){
            const {isHot} = this.state
            return(
                  <div>
                        <h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
                        <input ref={ (currentNode)=>{this.input1=currentNode;console.log("@",c);} } type="text" />    
//ref回调函数如果是以内联函数的方式定义的，在更新过程会被执行两次,第一次传入参数null，第二次传入参数DOM元素。
                        <input ref={ this.saveInput } type="text" />    
//通过将ref的回调函数定义成class的绑定函数的方式可以避免上述问题。
                        <button onClick={this.showInfo}>点我提示输入的数据</button>
                        <button onClick={this.changeWeather}>点我提示输入的数据</button>
                  </div>
            )
      }
}
//渲染组件到页面
ReactDOM.render(<Demo />,document.getElementById('test') )

createRef容器

//创建组件
class Demo extends React.Component{
      /*
            React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是"专人专用"的。
      */
      myRef = React.createRef()
      myRef2 = React.createRef()
      
      showData = ()=>{
            console.log(this.myRef.current.value);
      }

      showData2 = ()=>{
            console.log(this.myRef2.current.value);
      }

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

}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )

react中的事件处理

//创建组件
class Demo extends React.Component{
      /*
            (1).通过onXxx属性指定事件处理函数(注意大小写)
                  a.React使用的是自定义(合成)事件，而不是使用原生DOM事件 — 为了更好的兼容性
                  b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) — 为了高效
            (2).通过event.target得到发生事件的DOM元素对象
      */
      //创建ref容器
      myRef = React.createRef()
      myRef2 = React.createRef()
      
      showData = ()=>{
            console.log(this.myRef.current.value);
      }
      showData2 = (event)=>{
            console.log(event.target.value);
      }

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

}
//渲染组件到页面
ReactDom.render(<Demo /> , document.getElementById('test') )