让事件处理函数返回一个函数可以吗

Question

你好，我是新来的反应者，我想知道是否可以在事件处理程序中返回一个函数，而不是向元素传递一个带参数的箭头函数？像这样：

deletePersonHandler(person) {
return () => {
const persons = [...this.state.persons];
const index = persons.indexOf(person);
persons.splice(index, 1)
this.setState({ persons });
}
}

和组件上渲染：

function Person(props) {
function Children() {
if (props.person.children) {
return <p>{props.person.children}</p>
}
else return null;
}
return (
<div className="person">
<p>Hello I am {props.person.name}, and I am {props.person.age} years old.</p>
<input value={props.person.name} type="text" onChange={(event) => { props.change(event, props.person.id) }} />

{/* Over Here!! */}
<button onClick={props.onDelete(props.person)}>Remove</button>
{Children()}
</div>
)
}

我测试了代码，它运行得很好，但我想问是否有任何挫折或后果？如果是的话，还有什么替代方案？以下是我Github帐户上的完整代码库：https://github.com/EtshD1/react-components

Answer 1

技术上是的。当然，你正在创建一个额外的不必要的函数，但JS非常高效，你永远不会达到可以创建的函数数量的上限。

然而，通过执行onClick道具中的函数，您的代码可读性会大大降低。开发人员习惯于看到该道具的函数定义，通过调用函数，我首先想到的是"这应该是一个定义而不是执行"；，所以我倾向于认为你的代码有漏洞，而事实并非如此。

您还将函数命名为onDelete，如"；该函数在"删除"时被调用；，但它不会立即执行，并在单击事件中调用返回的函数。

编程的一部分是不仅能写工作代码，还能写可读代码。你的代码将被其他开发人员阅读，你写的代码越晦涩和不必要，你就越难让阅读它的人阅读

总之，这样做可以吗？从技术上讲是的，但从语义上讲，不是。

Answer 2

您可以将按钮的名称设置为要删除的人的id，这样您就可以从event.target.name中获取id，并避免返回匿名函数。它看起来是这样的：

deletePersonHandler(event) {
const personId = Number(event.target.name) //only use Number() if the personId is a numer
const persons =  this.state.persons.filter(({id}) !== personId)
this.setState({ persons });
}

在你要使用的组件上：

function Person(props) {
function Children() {
if (props.person.children) {
return <p>{props.person.children}</p>
}
else return null;
}
return (
<div className="person">
<p>Hello I am {props.person.name}, and I am {props.person.age} years old.</p>
<input value={props.person.name} type="text" onChange={(event) => { props.change(event, props.person.id) }} />

{/* Over Here!! */}
<button name={props.person.id} onClick={props.onDelete}>Remove</button>
{Children()}
</div>
)}

您应该始终避免将参数传递给render()级别的函数，因为这会导致对账