/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 vote111 views1 answer
React-bootstrap problem-install new version
Javascript React
0 vote119 views1 answer
Syntax for srcset in react
Javascript React
1 vote140 views2 answers
[HomePage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
5 votes114 views2 answers
Lazy loading react
Javascript React
9 votes120 views3 answers
React select
Javascript React
1 vote130 views1 answer
React-native razorpay
Javascript React
0 vote124 views1 answer
Const userMessage Reaction = new UserMessage Reaction({ _id: mongoose.Types.ObjectId(), userId: "USERID", userName: "TESTUSERNAME", messageId: "TESTMESSAGEID", time: "TESTTIME" });
Javascript React
0 vote126 views1 answer
React native style variable
Javascript React
-1 vote134 views1 answer
Paypal in react js
Javascript React
-1 vote125 views1 answer
Get height component react
Javascript React