/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 vote217 views1 answer
React native pure component vs component
Javascript React
0 vote225 views1 answer
Export all functions from js file react
Javascript React
8 votes207 views3 answers
Disable eslint for react project
Javascript React
1 vote233 views1 answer
React addeventlistener useeffect
Javascript React
2 votes255 views2 answers
React aws s3 npm
Javascript React
0 vote222 views1 answer
Traduire text with api translate google in react
Javascript React
0 vote207 views1 answer
Uploading profile pic with react.js node.js express.js REST API to sqlite DB
Javascript React
1 vote235 views1 answer
Module '"../../../node_modules/react-native"' has no exported member 'View'
Javascript React
15 votes224 views5 answers
Usestate react hook
Javascript React
0 vote204 views1 answer
Open sans font react js
Javascript React