score:0

you must use class properties and arrow function together

class properties is part of stage-2

class ForgetPasswordForm extends Component {
  xubmit = (values) => {
    console.log(this);
  }

  render() {
    const { handleSubmit } = this.props;
    return <form onSubmit={ handleSubmit(this.xubmit) }>;
  };
}

Arrow function bind this to function

score:1

handleSubmit.bind(this.xubmit) by this way inside the handleSubmit, this points to this.xubmit.

I also suggest you to read how bind works.

Note: I know only JavaScript

score:1

Since you didn't provide your handleClick function I can only imagine that you have directly called the function passed in like handleClick (fn) { fn() } and this way you would have access to the context in that fn. Also you should pass a function to event handlers. Do something like this and see if it works:

onSubmit={this.props.handleSubmit.bind(this.props.context, this.xubmit.bind(this))}

You need to send parent component's context to your ForgetPasswordForm and bind handleSubmit to it to have access to that parent component's context and bind this.xubmit to this in order for it not to be undefined.

score:1

your custom submit function basically is wrong , just edit your code this way.

class ForgetPasswordForm extends Component {
 xubmit = (values) => {
  console.log(this);
 }

}

an call it this way ,

<form onSubmit={handleSubmit((values) => this.xubmit(values)) }>

Related Query

More Query from same tag