Javascript 在道具中使用功能时做出反应？

作为回应， 何时在道具中使用功能

例如，在下面的代码中，有时您不使用prop中的函数， 但有时你会

import React，{useState}来自“React”；
常量迭代示例=（）=>{
常量输入=React.createRef（）；
const[names，setNames]=useState(
[
{id:1，文本：'John'}，
{id:2，文本：'Jake'}，
{id:3，文本：'JJ'}，
{id:4，文本：'耶稣'}
])
常量[inputText，setInputText]=useState（“”）；
const[nextId，setNextId]=useState（5）；
const onChange=e=>setInputText（e.target.value）；
const onRemove=id=>{
const nextNames=names.filter（name=>name.id！==id）；
设置名称（下一个名称）；
}
const namesList=names.map（name=>
onRemove（name.id）}>{name.text}
）；
const onClick=（）=>{
const nextNames=names.concat({
id:nextId，
文本：输入文本
});
setNextId（nextId+1）；
设置名称（下一个名称）；
setInputText（“”）；
input.current.focus（）；
}
const onEnter=（e）=>{
如果（e.key=='Enter'）{
onClick（）；
}
}
返回(
添加
{namesList}
);
};
导出默认迭代示例；

这里您使用（）=>onDoubleClick={（）=>onRemove（name.id） 但是，在

onKeyPress={onEnter}

或

onChange={onChange}

---

那么什么时候在道具中使用函数呢？

您的三个示例都使用函数：

onDoubleClick={() => onRemove(name.id)}
onKeyPress={onEnter}
onChange={onChange}

唯一的区别是其中一个需要为函数指定参数（

onRemove

），而其他两个则不需要

---

如果属性传递的参数（在本例中为

onKeyPress

和

onChange

）正是函数所需的参数，则只需按原样引用函数。但如果需要自定义传递给函数的参数（在本例中为

onRemove

），您可以将其封装在一个新函数中，以封装该自定义项。

基本上，当您需要传递额外参数时（除了

事件
本身）可以使用它。
例如，在您的情况下，当您想要传递
id
时，您需要：

onClick={(e) => onRemove(name.id)}
//or together with the event
onClick={(e) => onRemove(e, name.id)}

否则，当您不需要在函数中传递参数，或者只需要传递
事件时，您可以这样编写：

onClick={onRemove}

这个

相当于

onClick={(e) => onClick(e)}

对于第一种情况，您将函数本身作为道具传递

对于第二种情况，您正在定义一个内联函数，该函数使用参数
（e）
调用
onClick
函数

通常，您可以将函数本身作为道具传递，除非在调用函数时要添加其他参数。例如

onClick={(e) => onClick(e, name.id)}

：）

大卫和埃尔坦的回答真的很好，很完整。
我只想补充两件事

首先，考虑到reactjs的良好实践和性能，请不要在渲染中使用箭头函数

根据eslint规则：

JSX道具中的绑定调用或箭头函数将在每次渲染时创建一个全新的函数。这对性能不利，因为如果将全新的函数作为道具传递给使用道具上的引用相等性检查来确定是否应更新的组件，则可能会导致不必要的重新渲染。

其次，如果您需要自定义要传递给函数的内容（在本例中，删除时使用
，
），您可以使用lodash中的另一个选项：
partial


下面是一个代码示例：


const namesList=names.map（name=>

{name.text}

)
我只是想澄清一下，因为你似乎没有得到你想要的对初学者友好的答案：

类似于“onKeyPress”或“onChange”的东西会附带一个隐式事件。这意味着什么？这意味着，无论您将什么函数绑定到该组件中，它都会被一个“事件”触发这就是你输入的任何函数的参数。事实上，如果你看函数本身，你会注意到它们接受一个参数“e”表示事件。因此，如果它有帮助，你可以把其中的一些命令想象为

onKeyPress={（）=>onEnter（keyPressEvent）}

事件中会包含一些有用的数据，但通常我们唯一关心的是用户按下了哪个键，或者（在发生更改时）输入的新内容是什么

对于像onDoubleClick这样的东西，你会给它一些额外的数据。你可以用javascript做一些奇特的步法来识别双击的内容及其属性，但这是一个麻烦，添加了不必要的代码，并且倾向于混淆你在编写代码时的意图。因此，最终只需输入在
onDoubleClick={（）=>onRemove（name.id）中，可以使用任何您想要的函数
将自定义变量传递给函数。如果只使用函数名，则无法传递自定义变量。只有回调传递的变量才会发送给函数。在您的示例中，回调事件将发送给onChange，依此类推。请查看此可能的重复项：嘿，谢谢非常详细的帖子！你能从this.onRemove中删除“this.”吗？如果它在类中，那么代码就可以工作了（否：），但是在这种情况下是的，对不起，我的坏：angel:
onClick={(e) => onClick(e)}

onClick={(e) => onClick(e, name.id)}