/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

18 votes121 views5 answers
How to use svg in react js
Javascript React
2 votes138 views1 answer
React native responsive font
Javascript React
1 vote123 views1 answer
React map component in
Javascript React
0 vote134 views2 answers
React native store sensitive data in redux
Javascript React
1 vote76 views1 answer
Add class to react children
Javascript React
0 vote157 views1 answer
React hook form reset only one field
Javascript React
0 vote123 views1 answer
React router route not found redirect
Javascript React
0 vote125 views1 answer
Error: Error: Unable to resolve module `react-native-gesture-handler` from `node_modules\@react-navigation\native\lib\module\Scrollables.js`: react-native-gesture-handler could not be found within the project.
Javascript React
0 vote135 views1 answer
Change navigation animation react native
Javascript React
8 votes128 views1 answer
Professional react projects
Javascript React