/Javascript/React/Call a method of component from outside react

Call a method of component from outside react


const MyComponent = ({myRef}) => {
  const handleClick = () => alert('hello world')
  myRef.current.handleClick = handleClick
  return (<button onClick={handleClick}>Original Button</button>)
}

MyComponent.defaultProps = {
  myRef: {current: {}}
}

const MyParentComponent = () => {
  const myRef = React.useRef({})
  return (
    <>
      <MyComponent 
        myRef={myRef}
      />
      <button onClick={myRef.current.handleClick}>
        Additional Button
      </button>
    </>
  )
}

Source: stackoverflow.com

Calling a Method from Outside of the Component

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

// Somewhere in Parent.vue
this.$refs.child.method();

Source: dev.to

Similar codes

0 vote363 views1 answer
Stop playing music when page is closed react
Javascript React
66 votes311 views4 answers
How to redirect to a website in react
Javascript React
-1 vote326 views2 answers
React native Platform
Javascript React
0 vote326 views1 answer
Google-maps-react give undefined lat long
Javascript React
0 vote354 views1 answer
React js Property 'Select' does not exist on type 'Form'.ts(2339) an
Javascript React
0 vote308 views1 answer
React-redux form preventdefault
Javascript React
0 vote327 views1 answer
Detecting change in animated value react native
Javascript React
0 vote340 views1 answer
Force users to update your application in React Native
Javascript React
0 vote326 views1 answer
React is not iterable
Javascript React
0 vote345 views1 answer
React how to block render if data is not fetched yet
Javascript React