javascript - 如果没有箭头功能，DOM 事件将无法工作

Question

这是一个React代码，用于双击列表中的项目来删除它。

import React from 'react';

const IterationSample = () => {
  const [names, setNames] = React.useState([
    { id: 1, text: 'A' },
    { id: 2, text: 'B' },
    { id: 3, text: 'C' },
    { id: 4, text: 'D' }
  ]);

  const onRemove = id => {
    const nextNames = names.filter(name => name.id !== id);
    setNames(nextNames);
  };

  const nameList = names.map(name => {
    return (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
    )
  });

  return (
      <ul>{nameList}</ul>
  );
};

export default IterationSample;

问题:在这一部分中，

const nameList = names.map(name => {
    return (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
    )
  });

如果我像这样更改代码，为什么它不起作用？

const nameList = names.map(name => {
    return (
    <li key={name.id} onDoubleClick={onRemove(name.id)}>
      {name.text}
    </li>
    )
  });

列表未呈现，并且控制台中不显示错误消息。

Answer 1

在第一种情况下，您使用 => 箭头函数定义了一个函数

但是在第二种情况下你调用了该函数

因此，针对第二种情况使用以下代码更新您的代码

const nameList = names.map(name => {
return (
<li key={name.id} onDoubleClick={this.onRemove.bind(null,name.id)}>
  {name.text}
</li>
)

});