三大核心属性 --- ref与事件处理

ref

ref：给表单元素进行标记，为了更好获取元素，类似于js中的document.getElementsByTagName这类的获取元素

基本使用

//创建组件
class Demo extends React.Component{
  //展示左侧输入框的数据
  showData = ()=>{
    const {input1} = this
    alert(input1.value)
  }
  //展示右侧输入框的数据
  showData2 = ()=>{
    const {input2} = this
    alert(input2.value)
  }
  render(){
    return(
      <div>
        <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
      </div>
    )
  }
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

函数式组件中使用ref

import { useRef } from 'react';
function Demo(){
	const instance = useRef(null);
	const dom = instance.current;
	return (
		<div className='pg-game-define' ref={instance}></div>
	)
}

理解

组件内的标签可以定义ref属性来标识自己

编码

• 字符串形式的ref：<input ref="input1"/>

• 回调形式的ref：<input ref={(c)=>{this.input1 = c}} (推荐使用)

• createRef创建ref容器：

  myRef = React.createRef()  <input ref={this.myRef}/>
  

  • React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的

获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

var MyComponent = React.createClass({
	 handleClick: function() {
		 this.refs.myTextInput.focus();
	 },
	 render: function() {
	  return (
	    <div>
	      <input type="text" ref="myTextInput" />
	      <input type="button" value="Focus the text input" onClick={this.handleClick} />
	    </div>
	  );
	 }
 });

ReactDOM.render(
	 <MyComponent />,
	 document.getElementById('example')
 );

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

事件处理

• 通过onXxx属性指定事件处理函数(注意大小写)
  • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
  • React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
• 通过event.target得到发生事件的DOM元素对象——————————不要过度使用ref
• 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefaul

class Demo extends React.Component{
  //创建ref容器
  myRef = React.createRef()

  //展示左侧输入框的数据
  showData = (event)=>{
    console.log(event.target);
    alert(this.myRef.current.value);
  }

  //展示右侧输入框的数据
  showData2 = (event)=>{
    alert(event.target.value);
  }

  render(){
    return(
      <div>
        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
      </div>
    )
  }
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

向事件处理程序传递参数

在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递