onRefs的使用

用于父子之间通信

在开发过程中，父组件给子组件传递数据可以使用props进行，但是，父组件想要拿到子组件的数据或者是触发子组件的方法应该怎么实现呢？通过了解，我们可以使用
父组件想要操作子组件方法或者改变子组件的数据可以使用onRefs：

  // 在子组件中：
  import React    from 'react';
  import ReactDOM from 'react-dom';
  export default class OnRefsTest extends React.Component {
    constructor(props) {
      super(props);
      props.onRef(this);
      this.state = {
        number: 0,
      };
    }
    onClick =() => {
      const { number } = this.state;
      this.setState({
        number: ++ this.state.number,
      });
      console.log(this.state.number);
    }
    render() {
      return (
        <div>
          <span>{this.state.number}</span>
          <button onClick={this.onClick}>加加加</button>
        </div>
      )
    }
  }

这里随意定义了一个函数和状态state，在构造函数中，使用props.onRef(this)子组件绑定到父组件。

  import React from 'react';
  import './App.css';
  import OnRefsTest from './component/OnRefs.js';

  export default class App extends React.Component {
    test;
    hanleClick=() =>{
      this.test.onClick();
    };
    render() {
      return (
        <div className="App">
          <OnRefsTest  
            onRef={node => {
              this.test = node;
            }}
          />
          <button onClick={this.hanleClick}>点击</button>
        </div>
      );
    }
  }

在父组件中，定义一个test对象，并将子组件通过onRef属性将子组件dom赋值给父组件，这样父组件就可以调用子组件的方法，改变子组件的状态。
运行代码，点击父组件的按钮，在控制台可以看到子组件的number值的改变。

image.png

用于获取dom实例

  import React    from 'react';
  import ReactDOM from 'react-dom';

  export default class autoFocus extends React.Component {
    textInput;
    componentDidMount() {
      this.textInput.focus();// 自动聚焦
      this.textInput.placeholder='jjj';
    }
    render() {
      return(
        <input ref={node => { this.textInput = node }}></input>
      )
    }
  }

运行程序可以看到，输入框自动聚焦,初始值为’jjj’。

image.png