I am trying to trigger click button on another onClick event function.
Error : Uncaught TypeError: this.clickBack.current.click is not a function
React version is 16.8.6
constructor(props) {
super(props)
this.clickBack = React.createRef();
this.startInterview = this.startInterview.bind(this);
}
startInterview(){
console.log('hello') // output : hello
console.log(this.clickBack.current); // output : Button {props: {…}, context: {…}, refs: {…}, updater: {…}, onClick: ƒ, …}
this.clickBack.current.click(); // output : Uncaught TypeError: this.clickBack.current.click is not a function
}
In render -> return method
<Link to={backLink}>
<Button ref={this.clickBack}> Back</Button>
</Link>
<Button onClick={this.startInterview}> Start Interview</Button>
Best Answer
as we can see in the console.log the ref is referencing the Button component, not a dom element.If this Button is a component you defined, you should pass your ref through a prop to the
button
dom element e.g.<Button innerRef={this.clickBack}...>
Button.js
(here innerRef is an arbitrary name)