1. 认识refs

1.1 refs说明

2. 获取DOM元素的使用

2.1 通过refs获取DOM元素

示例代码如下:

class MyCom extends React.Component{
    handleClick =() => {
        console.log(this.refs);
      myinput: input
      节点上ref属性值: 对应DOM节点
        // 1\. 获取DOM 节点的值
        let value = this.refs.myinput.value;
        // 2\. 打印input标签中输入的内容
        console.log(value);
    render(){
        return (
                <input type="text" ref="myinput"/>
                <button onClick={ this.handleClick }>点击打印input内容</button>
ReactDOM.render(<MyCom/>, document.getElementById("app"))
示例说明:
在需要获取的DOM元素上添加ref属性,自定义一个字符串的值来标记这个节点
当点击button按钮时,在事件处理函数中,通过组件实例对象this的refs属性,以及节点标记获取元素
然后在通过value获取节点的值,并答应
2.2 自定组件实例属性获取DOM元素
DOM元素上ref属性的值除了是字符串还可以是一个函数
这个函数会接受一个参数,这个参数就还是当前的DOM节点
在函数中给组件实例对象自定义一个属性,并赋值这个DOM元素
此时就可以通过组件实例对象获取节点并获取值
实例代码:
class MyCom extends React.Component{
    handleClick =() => {
        console.log(this);
      input: input
        // 1\. 获取DOM 节点的值
        let value = this.input.value;
        // 2\. 打印input标签中输入的内容
        console.log(value);
    render(){
        return (
                <input type="text" ref={(input) => this.input = input}/>
                <button onClick={ this.handleClick }>点击打印input内容</button>
ReactDOM.render(<MyCom/>, document.getElementById("app"))
实例说明:
因为给input元素的ref赋值的是函数不是字符串,因为使用{}语法
在函数中通过形参input接受到传递过来的input DOM元素
并在函数中将这个DOM元素赋值给组件实例对象(this)的自定义属性input
因此在点击事件函数中打印的组件实例对象(this)中就有自定义属性input值为inputDOM元素
2.3 通过React.createRef()API获取节点
在React 16.3 版本引入了React.createRef() API,
通过这个API,返回一个对象,这个对象,对象中有一个默认的current属性,值为null
此时你需要获取那个DOM元素,就可以将这个对象作为ref属性的属性值
那么就可以通过这个对象的current属性获取DOM元素
示例代码如下:
class MyCom extends React.Component{
    // 给组件实例对象添加一个myInput属性
    // 值为将要分配DOM节点的对象
    myInput = React.createRef();
    handleClick =() => {
        console.log(this);
          myInput:{current:input}
        // 1\. 获取DOM 节点的值
        let value = this.myInput.value;
        // 2\. 打印input标签中输入的内容
        console.log(value);
    render(){
        return (
                <input type="text" ref={this.myInput}/>
                <button onClick={ this.handleClick }>点击打印input内容</button>
ReactDOM.render(<MyCom/>, document.getElementById("app"))
示例说明:
在组件中创建一个实例对象自定义属性myInput,
这个属性值是通过React.createRef()API创建的用于分配DOM元素的对象
在需要获取的input元素上添加ref属性,属性值,就是要分配的实例对象的自定义属性
此时就可以通过组件实例对象自定义属性myInput的current属性获取到DOM元素
3. 获取子组件实例对象
上面所学的三种不同的获取DOM节点的方法,也可以用在组件上
在组件的子组件上也可以定义ref属性
通过ref获取子组件实例对象
在通过子组件的实例对象也可以调用子组件实例对象上的
示例代码:
// 子组件
class MySon extends React.Component{
    // 组件MySon实例对象方法
    run = () => {
        console.log("子组件上的run方法");
    render(){
        return (
                这是子组件
// 父组件
class MyCom extends React.Component{
    myInput = React.createRef();
handleClick =() => {
    console.log(this);
      MySon: MySon
    // 1\. 获取子组件实例对象
    let {MySon} = this;
    // 2.调用子组件实例对象上的run方法
    MySon.run()
render(){
    return (
            {/* 在子组件上使用ref属性 */}
            <MySon ref={(MySon) => this.MySon = MySon }/>
            <button onClick={ this.handleClick }>点击打印input内容</button>