/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 vote349 views2 answers
Change iphone return in keyboard to search in react native
Javascript React
5 votes359 views2 answers
React img not showing
Javascript React
1 vote399 views3 answers
Npm update react
Javascript React
4 votes355 views1 answer
How to creat emmet in react
Javascript React
2 votes331 views1 answer
React higher order components
Javascript React
18 votes367 views1 answer
Get specific characters from state variable reactjs
Javascript React
21 votes339 views6 answers
React native vector icon
Javascript React
0 vote371 views1 answer
How to disable react in jsx scope eslint
Javascript React
-5 votes356 views3 answers
Use ref in component reactjs
Javascript React
0 vote327 views1 answer
Créer composant react
Javascript React