/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

140 votes597 views3 answers
React.js installation
Javascript React
0 vote161 views1 answer
React i18n with parameeter
Javascript React
0 vote172 views3 answers
React js require pasword to have special charaacter
Javascript React
5 votes170 views1 answer
React native text wrap
Javascript React
6 votes118 views2 answers
React-router-dom get current route
Javascript React
-3 votes164 views1 answer
React native share
Javascript React
0 vote160 views1 answer
React native undedined map
Javascript React
32 votes169 views2 answers
Npm react router dom@5
Javascript React
0 vote176 views1 answer
React native fetch response code
Javascript React
0 vote210 views1 answer
Add update react pwa feature
Javascript React