/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 votes210 views1 answer
React allow only numbers in input
Javascript React
7 votes210 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote188 views1 answer
React i18n outside component
Javascript React
3 votes189 views1 answer
How to call a function in react with arguments onclick
Javascript React
5 votes202 views1 answer
React native backgrunde img
Javascript React
1 vote201 views1 answer
Type writer in react
Javascript React
4 votes242 views1 answer
Multiple click events in react
Javascript React
0 vote201 views1 answer
Hide component blur react hooks
Javascript React
0 vote191 views1 answer
Get nested value on object react using dot
Javascript React
0 vote258 views1 answer
How to only register one click on nested component and not parent component in react js
Javascript React