0

I was trying to check what happenes to this object inside a method if I don't bind the method inside the constructor. What I found is that the result is different for Form and Button. Below is my code for better understanding:

import React from 'react';
import {Button, Form, Input} from 'reactstrap';
class Test extends React.Component{
 constructor(props){
  super(props);
 }

 handleClick(){
  console.log(this);} //This gives complete information about the Button object and its properties

handleSubmit(e){
console.log(this); e.preventDefault();} //This one is undefined

render(){
  return(
<>
   <Form onSubmit={this.handleSubmit} >

    <Button type="submit" name="submit">Submit</Button>

   </Form>

   <Button name="butt1" onClick={this.handleClick}>Click</Button>
</>
  );
  }
}

I am trying to find the reason for this different behaviour, but couldn't succeed. Can you people please give the reason for the same and suggest a way so that this inside handleSubmit starts refering to Form object?

Thanks in advance!

Vipul Tyagi
  • 547
  • 3
  • 11
  • 29
  • There seems some syntactical issue in your code. Like typo in keyword `constructor`, and `render()` method returning two components which are not wrapped under a common parent component/element. – adzo261 Jun 13 '20 at 10:13
  • Yes, that was a typo and I have edited the code to correct it. You can now have a look – Vipul Tyagi Jun 13 '20 at 10:16
  • This question has been marked duplicate, but the refered question is completely different from mine. – Vipul Tyagi Jun 13 '20 at 10:21

0 Answers0