Call a React component method from outside

Question

I want to call a method exposed by a React component from the instance of a React Element   For example  in this jsfiddle   I want to call the alertMessage method from the HelloElement reference   Is there a way to achieve this without having to write additional wrappers   Edit  copied code from JSFiddle    lt div id  container  gt  lt  div gt   lt button onclick  onButtonClick    gt Click me  lt  button gt    var onButtonClick   function             call alertMessage method from the reference of a React Element  Something like HelloElement alertMessage       console log  clicked        var Hello   React createClass  displayName   Hello        alertMessage  function             alert this props name                                            render  function             return React createElement  div   null   Hello    this props name              var HelloElement   React createElement Hello   name   World      React render      HelloElement      document getElementById  container

User · Answer

class AppProvider extends Component     constructor         super         window alertMessage   this alertMessage bind this          alertMessage         console log  Hello World             You can call this method from the window by using window alertMessage

User · Answer

I ve done something like this   class Cow extends React Component        constructor  props            super props           this state    text   hello               componentDidMount              if  this props onMounted                this props onMounted                   say  text   gt  this say text                                       render              return                lt pre gt                                                        lt   this state text   gt                   -------------------                                                               oo                                                                                         ----w                                                          lt  pre gt                        say  text            this setState  text  text               And then somewhere else   class Pasture extends React Component        render              return                lt div gt                   lt Cow onMounted  callbacks   gt  this cowMounted callbacks     gt                   lt button onClick       gt  this changeCow      gt               lt  div gt                        cowMounted  callbacks            this cowCallbacks   callbacks             changeCow              this cowCallbacks say  moo               I haven t tested this exact code  but this is along the lines of what I did in a project of mine and it works nicely     Of course this is a bad example  you should just use props for this  but in my case the sub-component did an API call which I wanted to keep inside that component  In such a case this is a nice solution

User · Answer

method 1 using ChildRef   public childRef  any   React createRef lt Hello gt      public onButtonClick       gt        console log this childRef current      this will have your child reference     lt Hello ref     this childRef    gt   lt button onclick  onButtonClick    gt Click me  lt  button gt    Method 2  using window register  public onButtonClick       gt        console log window yourRef      this will have your child reference     lt Hello ref      ref    gt   window yourRef   ref     gt    lt button onclick  onButtonClick    gt Click me  lt  button gt

User · Answer

I use this helper method to render components and return an component instance  Methods can be called on that instance   static async renderComponentAt componentClass  props  parentElementId            let componentId   props id          if  componentId               throw Error  Component has no id property  Please include id     xyz     to component properties                        let parentElement   document getElementById parentElementId            return await new Promise  resolve  reject    gt                props ref    component   gt                   resolve component                              let element   React createElement componentClass  props  null               ReactDOM render element  parentElement

User · Answer

If you are in ES6 just use the  static  keyword on your method from your example would be the following  static alertMessage  function                          Hope can help anyone out there

User · Answer

You can do like  import React from  react    class Header extends React Component       constructor            super            window helloComponent   this             alertMessage           console log  Called from outside               render           return          lt AppBar style   background   000    gt          Hello        lt  AppBar gt                   export default Header    Now from outside of this component you can called like this below  window helloComponent alertMessage

User · Answer

There are two ways to access an inner function  One  instance-level  like you want  another  static level   Instance  You need to call the function on the return from React render  See below   Static  Take a look at ReactJS Statics  Note  however  that a static function cannot access instance-level data  so this would be undefined   var onButtonClick   function            call alertMessage method from the reference of a React Element       HelloRendered alertMessage          call static alertMessage method from the reference of a React Class       Hello alertMessage        console log  clicked        var Hello   React createClass       displayName   Hello       statics            alertMessage  function                  alert  static message                         alertMessage  function              alert this props name               render  function              return React createElement  div   null   Hello    this props name              var HelloElement   React createElement Hello        name   World       var HelloRendered   React render HelloElement  document getElementById  container       Then do HelloRendered alertMessage

User · Answer

With React17 you can use useImperativeHandle hook  useImperativeHandle customizes the instance value that is exposed to parent components when using ref  As always  imperative code using refs should be avoided in most cases  useImperativeHandle should be used with forwardRef  function FancyInput props  ref        const inputRef   useRef        useImperativeHandle ref       gt             focus       gt                inputRef current focus                            return  lt input ref  inputRef        gt      FancyInput   forwardRef FancyInput    In this example  a parent component that renders  would be able to call inputRef current focus

User · Answer

With the render method potentially deprecating the returned value  the recommended approach is now to attach a callback ref to the root element  Like this   ReactDOM render   lt Hello name  World  ref   element    gt   window helloComponent   element    gt   document getElementById  container       which we can then access using window helloComponent  and any of its methods can be accessed with window helloComponent METHOD   Here s a full example    x000D   x000D  var onButtonClick   function     x000D    window helloComponent alertMessage    x000D    x000D   x000D  class Hello extends React Component   x000D    alertMessage     x000D      alert this props name   x000D      x000D   x000D    render     x000D      return React createElement  div   null   Hello    this props name   x000D      x000D     x000D   x000D  ReactDOM render   lt Hello name  World  ref   element    gt   window helloComponent   element    gt   document getElementById  container     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  container  gt  lt  div gt  x000D   lt button onclick  onButtonClick    gt Click me  lt  button gt  x000D   x000D   x000D

User · Answer

It appears statics are deprecated  and the other methods of exposing some functions with render seem convoluted  Meanwhile  this Stack Overflow answer about debugging React  while seeming hack-y  did the job for me

User · Answer

With React hook - useRef   const MyComponent     myRef     gt      const handleClick        gt  alert  hello world     myRef current handleClick   handleClick   return   lt button onClick  handleClick  gt Original Button lt  button gt      MyComponent defaultProps       myRef   current         const MyParentComponent        gt      const myRef   React useRef       return        lt  gt         lt MyComponent          myRef  myRef          gt         lt button onClick  myRef current handleClick  gt          Additional Button        lt  button gt       lt   gt         Good Luck

User · Answer

You can just add an onClick handler to the div with the function  onClick is React s own implementation of onClick  and you can access the property within     curly braces  and your alert message will appear   In case you wish to define static methods that can be called on the component class - you should use statics  Although    Methods defined within this block are static  meaning that you can run them before any component instances are created  and the methods do not have access to the props or state of your components  If you want to check the value of props in a static method  have the caller pass in the props as an argument to the static method     source   Some example code       const Hello   React createClass                           The statics object allows you to define static methods that can be called on the component class  For example                     statics                customMethod  function foo                  return foo      bar                                      alertMessage  function                 alert this props name                                                    render  function                  return                    lt div onClick  this alertMessage  gt                  Hello  this props name                   lt  div gt                                        React render  lt Hello name   aworld     gt   document body     Hope this helps you a bit  because i don t know if I understood your question correctly  so correct me if i interpreted it wrong

[reactjs] Call a React component method from outside

Examples related to reactjs