/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

2 votes322 views1 answer
How to use `setState` callback on react hooks
Javascript React
0 vote343 views1 answer
JSON.stringify with strip slash reactjs
Javascript React
1 vote349 views1 answer
Android resource linking failed react native image crop picker
Javascript React
-1 vote332 views2 answers
Email validation in react js
Javascript React
0 vote321 views1 answer
React router native back button
Javascript React
3 votes319 views2 answers
React native pm ERR! code EINTEGRITY
Javascript React
139 votes475 views2 answers
React js installation steps
Javascript React
126 votes525 views4 answers
Npm create react app
Javascript React
1 vote334 views1 answer
How to install react fullpage using npm
Javascript React
0 vote380 views1 answer
Rotas react com axios
Javascript React