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)) }>
Source: stackoverflow.com
Related Query
- Missing this in onSubmit event handler with redux-form 6
- React form onSubmit event object missing values on devtools
- React redux passing event handler through connect & mapDispatchToProps vs. rendering child with props
- Redux Form props not displaying in event handler
- How to submit a form through onSubmit event handler
- The element onClick handler conflicts with form onSubmit of sibling element
- React Redux form 2 submits with onSubmit and redirect
- Redux to get form data for onsubmit event
- Trying to return jsx from an event handler onSubmit of the form
- onSubmit event handler not working in Reactjs form
- Onclick event handler with passing this in reactjs
- rjsf with typescript, how can I access formData and event in the onSubmit handler
- Warning: This synthetic event is reused for performance reasons happening with <input type="checkbox" />
- React.js: submit form programmatically does not trigger onSubmit event
- React: this is null in event handler
- Redux Form - initialValues not updating with state
- Value of this in React event handler
- React Form Component onSubmit Handler Not Working
- React form with multiple buttons - how to choose one to handle onSubmit event?
- Implementing Invisible reCAPTCHA with Redux Form
- React Ref Form onSubmit Handler not triggered
- How to connect simple Formik form with Redux store and dispatch an action?
- How to dynamically update the value for any input field with one event handler function, using hooks
- Redux form with self creating inputs
- How to use Redux Form Wizard with permanent URLS per page
- Why is this not scoped in React form onSubmit function?
- Multiple Registration Form with redux and react
- Communication between two React form components with Redux
- Using Redux Form with React Router
- Force input's onChange event bubble to parent form with the value stored in the state
More Query from same tag
- Get live data from database in solidity
- Better way of extending React components
- Property 'x' does not exist on type 'unknown'
- How to render a self-destructing paragraph at mouse position in React?
- Get data from Node REST API and populate other controls
- How to enable second level imports for my react component library packages?
- Converting React component to hook
- Sending an object, in a get request, in params, in postman
- React Higher Order Component Initial Props
- React dynamic form input useRef typeError
- ComponentDidUpdate firing multiple time instead of once per update
- React onClick event yields: "Uncaught TypeError: Cannot read property of undefined", despite binding
- How to make the function known by the command.js and index.d.ts?
- React/gatsby with Lottie animation bottlenecks the DOM
- I try to sort the value and update the same of both columns by onclick of name and Lname(its TH)
- Unable to override Material-UI theme styles
- i have issues regarding react state
- Why my state is not getting set inside class based component and it should work but it is not neither i am getting error
- Error while deploying react based SSR app, using firebase-functions
- JSX: Expression inside another expression in a prop value
- How to update state in Arr object?
- How to remove duplicate arithmetic operators using regex
- jsx unexpected token passing array of object
- How do I attach an existing <IMG> element (HTMLImageElement) to a Facebook React.js component?
- React with Windows Authentication
- React: return object from hook causing object re-create on every render
- How to change focus to another component when Enter key is pressed
- How should I unit test this React Component?
- Is it possible to hold a list of react components in state and render them?
- How do I ensure that using `gcloud app deploy` is using my build folder not my dev files?