React - Как явно передать событие из onSubmit без лямбда-выражений - PullRequest
Новая
       7

React - Как явно передать событие из onSubmit без лямбда-выражений

0 голосов
/ 10 января 2019

В нашем проекте у нас в настоящее время есть следующее правило tslint: jsx-no-lambda

Когда мне нужно захватить event из onSubmit,

Мой код выглядит примерно так: 

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

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

Это можно решить, удалив функцию стрелки в jsx следующим образом: 

<form onSubmit={ this.handleLogin }

Есть ли здесь более элегантное решение для удобочитаемости? В частности, сообщая читателю, откуда взялась строка event: <form onSubmit={ this.handleLogin }

Кроме того, как передать дополнительные параметры в handleLogin?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Да, в основном после назначения вашей функции конструктору, например: 

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

Вы можете определить свою функцию следующим образом: 

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

и, наконец, ваш компонент будет выглядеть так: 

<form onSubmit={ this.handleLogin }

теперь отвечая на ваши вопросы, в основном вся информация с мероприятия будет на e, например, кто звонил, куда и т. Д.

0 голосов
/ 10 января 2019

Вам не нужно использовать лямбда-функцию, вы можете использовать обычный синтаксис функции: 

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

Тогда вам придется связать функцию handleLogin в конструкторе (в противном случае вы потеряете класс this context): 

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

и тогда вы не получите ошибку jsx-no-lambda tslint.

Имейте в виду, что передача функции реквизиту вызовет создание функция каждый раз, когда рендеринг компонента, который может иметь производительность последствия.

См. Дополнительную информацию Передача функции компонентам

...