For the React component, refs points to an instance of the component class, so any method defined by that class can be called. If you need access to the component’s real DOM, you can use reactdom.finddomNode to find the DOM node, but this is not recommended. Because this breaks encapsulation in most cases, it’s often possible to build code in React in a cleaner way.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Comp extends Component {
    inner() {
      console.log('inner')}render() {
        return (
          <div>
            <input type="input"/>
          </div>)}}class App extends Component {
    constructor () {
      super()
    }    
    componentDidMount () {
      const myComp = this.refs.myComp;
      myComp.inner();  // Access the function of the child component
      const dom = ReactDOM.findDOMNode(myComp);
      dom.childNodes[0].value = 'hello';
      dom.childNodes[0].focus();
    }
    render() {
        return (
          <div>
            <Comp ref="myComp" />
          </div>); }}export default App;
Copy the code