当必须this
在事件处理程序中使用关键字时,必须将函数(事件处理程序)与this
kerword绑定。否则,您需要使用箭头功能。
例如
//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
this.setState({
isClicked:true
});
}
render() {
return (
<div className="App">
<button onClick={this.handleClick}>Click</button>
</div>
);
}
但是,使用上述方法,您无法传递参数。您需要使用…
bind(this, param)
在功能之后即
<button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>
这是问题。
将参数传递给事件处理程序的最有效方法是什么?
根据官方文档,使用bind()
会损害性能,因为…
每次渲染组件时,在render中使用Function.prototype.bind都会创建一个新函数
使用匿名箭头功能也是如此。医生说…
每次渲染组件时,在渲染中使用箭头函数都会创建一个新函数
那么,传递参数的最有效方法是什么?
任何输入将不胜感激。
聚苯乙烯
有人问如何param
确定。这将是动态确定的(即并非始终如此111
)。因此,它可以来自状态,道具或此类中定义的其他功能。
如果您担心内联箭头功能的性能,请不要使用它。您仍然可以使用public class方法并绑定上下文this
。
handleClick = () => () => {
this.setState({ // this works now
isClicked:true
});
}
您可以像这样传递任何您喜欢的参数:
handleClick = (param1, param2, param3) => (event) => {
根据devserkan的评论,
这很麻烦,与其他选项相同。每个渲染中也会重新创建此功能。
不,不是。请参阅文档中的注释:
如果将此回调作为对较低组件的支持传递,则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用 class字段语法
,以避免此类性能问题。
另外,请参见来自bigga-hd的有关特定性能答案的评论:
避免在渲染中声明箭头功能或绑定以获得最佳性能。 在渲染之外声明功能。不再在每个渲染器上分配功能。
您如何称呼此处理程序?
您可以像这样调用方法:
onClick={this.handleClick(param1,param2,param3)}
PS:由于问题范围明显不同,因此我没有将此帖子标记为重复。因此,只需链接该帖子,即可深入了解更多细节。
当事件处理程序使用时(下面的使用),您必须将事件处理程序与kerword绑定。否则,需要使用箭头函数。 例如。 但是,使用上面的方法,您不能传递参数。你需要用任何一种... 匿名箭头函数 根据官方文档,使用会破坏性能,因为... 在render中使用function.Prototype.Bind会在组件每次呈现时创建一个新函数 使用匿名箭头函数也是如此。医生说... 在render中使用箭头函数会
我正在使用内联箭头函数来更改我的React组件中一些div的处理程序,但我知道从性能上来说这不是一个好方法。 客观地说,设置需要参数的处理程序的最有效方法是什么?这是我尝试过的: 1.内联箭头函数 2.如果我使用构造器绑定那么我怎么传递道具? 3.如果我移除箭头函数,那么在呈现器本身上调用的函数 4.如果我使用内联绑定,那么它的性能也不是最好的
问题内容: 所以我试图使反应与ES6语法一起工作。在ES5中,我有setInitialState,而没有使用函数绑定语法的构造函数。我有一个价格列表,该价格是任意的,并且我希望状态在输入元素发生更改时发生变化。但是正确的价格必须改变。 我什至不确定这是否是正确的方法。有人可以告诉我最近应做的事情吗? 这是我的代码: 这是错误… 问题答案: 您绑定的功能不正确 在构造函数中,您无需指定参数,只需要像
所以我试图用ES6语法使反应工作。在ES5中,我没有使用函数绑定语法的构造函数。我有一个任意的价格列表,当输入元素改变时,我希望状态改变。但是正确的价格必须改变。 我甚至不确定这是正确的方法。有人能告诉我最近应该怎么做吗? 这是我的代码: 这就是错误...
问题内容: 我有一个在React中创建的组件,该组件可以抽象出我的应用程序中的某些样式。我在两种不同的上下文中使用它- 一种用于提交登录表单,另一种用于导航到注册页面(以及将来可能的其他上下文)。 我试图弄清楚如何将事件处理程序从父组件传递到。我想为登录表单调用一个处理程序,但是为导航按钮调用一个处理程序。这可能吗? 我试过像这样调用组件: 我也尝试过删除arrow函数,这只会导致该函数在加载组件
问题内容: // this e works document.getElementById(“p”).oncontextmenu = function(e) { e = e || window.event; var target = e.target || e.srcElement; console.log(target); }; 也有人提出过类似的问题。 但是在我的代码中, 我试图获取被单击的子