/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 vote376 views2 answers
A function whose declared type is neither 'void' nor 'any' must return a value.
Javascript React
1 vote370 views1 answer
React native header
Javascript React
0 vote372 views1 answer
React-beforeunload react navive
Javascript React
2 votes373 views1 answer
How to dynamically show image from local storage in react native
Javascript React
0 vote414 views1 answer
Import batch from 'react-redux'
Javascript React
0 vote349 views1 answer
Npm i react-use-navigator-permissions
Javascript React
0 vote403 views1 answer
How to update the react version in next js app
Javascript React
0 vote378 views3 answers
How to serve React JS static files with express JS?
Javascript React
1 vote377 views1 answer
Input type email react js-validation
Javascript React
2 votes365 views1 answer
React not getting img by src
Javascript React