ステートレス機能コンポーネントのイベント関数にパラメータを渡す

Question

私はkeyDownをバインドしようとしているプレイリストを持っています..問題は、ライブラリを使用しているときに典型的なReact.Componentを使用できないということです（https://github.com/clauderic/react-sortable-hoc）。 ）私は機能的なステートレスコンポーネント（SortableContainer）を使用する必要があります。だから私は小道具や状態にアクセスする方法がありません。何とか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にデータを渡す必要があります

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