Javascript 将参数传递给无状态功能组件中的事件函数

我有一个播放列表，我正试图绑定一个键。。问题是我不能使用典型的React.Component，因为我使用的库（）要求我使用功能性无状态组件（SortableContainer）。所以我没有办法进入道具或者状态。我尝试将数据作为参数传递，但没有任何效果

这是可行的，但我需要以某种方式将数据传递给handleKeyDown。。特别是，我真的很想以某种方式将“道具”传递到handleKeyDown

function handleKeyDown(e) {
  // **** I need some way to access outside data in here some how..
  //      whether it's passed as a parameter or any other way
  console.log(e.keyCode);
}

const PlaylistPages = SortableContainer(( props ) => {
  return (
    <div className="playlist-sortable" onKeyDown={handleKeyDown} tabIndex="0">
    // etc
  );
}

功能handleKeyDown（e）{
//****我需要一些方法来访问这里的外部数据一些方法。。
//无论它是作为参数传递还是以任何其他方式传递
console.log（例如keyCode）；
}
const playlipages=可排序容器（（道具）=>{
返回(
//等
);
}

您可以将参数传递给一个更高阶的函数，该函数将为您完成此任务

function handleKeyDown(passedData) {
    return e => {
        console.log(passedData); // hello
        console.log(e.keyCode);
    }
}

const PlaylistPages = SortableContainer(( props ) => {
  const dataToPass = 'hello'
  return (
    <div className="playlist-sortable" onKeyDown={handleKeyDown(dataToPass)} tabIndex="0">
    // etc
  );
}

函数handleKeyDown（passedData）{
返回e=>{
console.log（passedData）；//您好
console.log（例如keyCode）；
}
}
const playlipages=可排序容器（（道具）=>{
const dataToPass='hello'
返回(
//等
);
}

您可以将参数传递给一个更高阶的函数，该函数将为您完成此任务

function handleKeyDown(passedData) {
    return e => {
        console.log(passedData); // hello
        console.log(e.keyCode);
    }
}

const PlaylistPages = SortableContainer(( props ) => {
  const dataToPass = 'hello'
  return (
    <div className="playlist-sortable" onKeyDown={handleKeyDown(dataToPass)} tabIndex="0">
    // etc
  );
}

函数handleKeyDown（passedData）{
返回e=>{
console.log（passedData）；//您好
console.log（例如keyCode）；
}
}
const playlipages=可排序容器（（道具）=>{
const dataToPass='hello'
返回(
//等
);
}

使用，并将道具和事件对象传递到

handleKeyDown

功能中

这样写：

onKeyDown = { e => handleKeyDown(props, e)}

handleKeyDown(props, e){
   console.log(e.target, props);
}

使用，并将道具和事件对象传递到

handleKeyDown

函数中

这样写：

onKeyDown = { e => handleKeyDown(props, e)}

handleKeyDown(props, e){
   console.log(e.target, props);
}

---

我认为更好的写作方式是：

onClick={clickHandler(passedData)}

clickHandler= (passedData) => (e) => {
  console.log(e)
  console.log(passedData)
}

---

箭头函数会导致不必要的重新渲染。

我认为更好的书写方式是：

onClick={clickHandler(passedData)}

clickHandler= (passedData) => (e) => {
  console.log(e)
  console.log(passedData)
}

---

箭头函数会导致不必要的重新渲染。

是反模式吗？@ShubhamKhatrisorry没有看到您正在返回一个函数，但mayank在评论中说的是ShortHand，这是反模式吗？@ShubhamKhatrisorry没有看到您正在返回一个函数，但mayank在评论中说的是ShortHand，您能澄清一点吗e关于这个解决方案？它确实有效，但理解这个行为并不是直接的。这是事实上的咖喱函数。请查看链接以获得更好的澄清。您能进一步澄清一下这个解决方案吗？它确实有效，但理解这个行为并不是直接的。这是事实上的咖喱函数。请查看链接以获取更多信息三、澄清。