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

Question

我有一个播放列表，我尝试将keyDown绑定到..问题是我无法使用典型的React.Component，因为我正在使用库（https://github.com/clauderic/react-sortable-hoc ），这要求我使用功能性无状态组件（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 
); 
} 

Answer 1

使用arrow function，并通过内部handleKeyDown功能道具和事件对象。

写这样的：

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

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

Answer 2

可以传递参数到高阶函数就可以了你

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 
); 
}