Question

在我们的项目中，我们目前具有以下tslint规则：jsx-no-lambda

当我需要从onSubmit捕获event时，

我的代码与此类似：

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？

Answer 1

是的，基本上是在将函数提交给这样的构造函数之后：

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上，例如谁打来，在哪里等。

Answer 2

您不必在那里使用lambda函数，可以使用常规函数语法：

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

然后，您必须在构造函数中绑定handleLogin函数（否则，您将丢失类this的上下文）：

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

，那么您将不会遇到jsx-no-lambda tslint错误。

请记住，将函数传递给道具会导致创建组件每次渲染时的功能，可能具有性能含义。

查看更多信息Passing function to components

React-如何在没有Lambda的情况下从onSubmit显式传递事件

2 个答案: