Javascript 内联箭头函数|空参数

我是ReactJS新手，对内联箭头函数的使用有疑问，即使在用ReactJS阅读了几个小时JavaScript ES6箭头函数之后，我也无法理解这一点

const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={() => removePerson(idx)}/>
       </div>
    );
};

removePerson函数需要索引作为参数，但当我提供如下内容时，我得到TypeError:temp未定义

const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={(idx) => removePerson(idx)}/>
       </div>
    );
};

const PersonInputs=（{idx}）=>{
返回(
removePerson（idx）}/>
);
};

---

我无法理解为什么onClick={（idx）=>removePerson（idx）}这会导致错误，但可以使用onClick={（idx）=>removePerson（idx）}。有人能帮我一下吗。提前感谢。

onClick

传递的是合成事件，而不是索引。删除

idx

作为

onClick

param：

const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={() => removePerson(idx)}/>
       </div>
    );
}

const PersonInputs=（{idx}）=>{
返回(
removePerson（idx）}/>
);
}

---

由于函数得到的是React的合成事件与索引，因此它抛出了一个类型错误。

一个

输入
的
onClick
事件不会将索引传递给处理程序。您希望句柄使用
PersonInputs
参数中的
idx
作为闭包。
const PersonInputs = ({ idx}) => {
 return (
       <div key={`name-${idx}`}>
      <input type="button" value="Remove Person" onClick={() => removePerson(idx)}/>
       </div>
    );
}