React - How to explicitly pass event from onSubmit without Lambdas

Question

In our project, we currently have the following tslint rule: jsx-no-lambda

When I need to capture event from onSubmit,

My code looks similar to this:

public handleLogin = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
}

public render() {
    return(
        <form onSubmit={(event) => this.handleLogin(event)}>
            ...
}

This can be solved by removing the arrow function in the jsx like this:

<form onSubmit={ this.handleLogin }

Is there a more elegant solution to readability here? More specifically, letting the reader know where event is coming from in this line: <form onSubmit={ this.handleLogin }

Additionally, how would one pass additional parameters to handleLogin?

Relevant question : https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method — Magnum, Jan 10 '19 at 16:30
If you define your handleLogin as a method in your class component, that is exactly the way to do it. That tecnique has, also, the performance benefit of not generating an on-the-fly function at each render. — 0xc14m1z, Jan 10 '19 at 16:33
Sorry for lack of more background, handleLogin is defined in my Component class. — Magnum, Jan 10 '19 at 17:09

score 0 · Answer 1 · answered Jan 10 '19 at 17:40

0

yeah basically after bidning your function to the construnctor like this:

constructor() {
  //your other stuff
  this.handleLogin = this.handleLogin.bind(this);
}

your can define your function like the following:

function handleLogin(e){
   e.preventDefault();
   // do anything that you want
}

and finally your component will be like:

<form onSubmit={ this.handleLogin }

now answering your questions, basically all the information from the event will be on the e, like who called, where, etc.

answered Jan 10 '19 at 17:40

Prince Hernandez

3,623
1
10
19

Thanks for your answer. However, I want to be more explicit to the reader when they are looking at the render function. My question is asking if it's possible to explicitly state that `event` being passed into `handleLogin` in the `
` component. `
– Magnum Jan 10 '19 at 17:44
1

I'm afraid that, then, no. You have the two options that you already know: the lambda or the callback, no more, sorry. – 0xc14m1z Jan 10 '19 at 18:08
:( thank you @0xc14m1z, I feel that it's a little bit of an oversight since this is such a common pattern in React codebases. I'll have to revisit this again in the future. – Magnum Jan 10 '19 at 18:27

Dan Porat · Answer 2 · 2019-01-10T16:52:28.330

-1

You don't have to use the lambda function there, you can use regular function syntax:

<form onSubmit={ function (event) { this.handleLogin(event) } }>

Then you'll have to bind the handleLogin function in the constructor (otherwise you lose the class this context):

constructor() {
  ..
  ..
  this.handleLogin = this.handleLogin.bind(this);
}

and then you won't get the jsx-no-lambda tslint error.

Keep in mind that passing a function to props will cause a creation of the function each time the component renders, which may have performance implications.

See more information Passing function to components

edited Jan 10 '19 at 16:52

answered Jan 10 '19 at 16:42

Dan Porat

406
2
6

I believe this is still the same thing as `
{ this.handleLogin(event) } }>
– Magnum Jan 10 '19 at 16:52
1

but you wanted to get rid of the lambda, didn't you? – Dan Porat Jan 10 '19 at 16:53
Yes, I do. However, your solution: `function (event) { this.handleLogin(event) }` IS in fact a lambda function. It is also what `(event) => { this.handleLogin(event) }` would transpile down to from es6 to es5. – Magnum Jan 10 '19 at 17:06
Additionally, I also tried your solution and ran my linter just in case for both our sanity; The `jsx-no-lambda` error still occurs. – Magnum Jan 10 '19 at 17:14

React - How to explicitly pass event from onSubmit without Lambdas

2 Answers2