У меня есть плейлист, к которому я пытаюсь привязать 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
  );
}
0
user1189352 28 Авг 2017 в 21:42

3 ответа

Лучший ответ

Используйте функцию стрелки и передайте реквизиты и событие объект внутри handleKeyDown функции.

Напишите это так:

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

handleKeyDown(props, e){
   console.log(e.target, props);
}
4
Mayank Shukla 28 Авг 2017 в 19:18

Я думаю, что лучший способ написания будет:

onClick={clickHandler(passedData)}

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

Функции стрелок могут привести к ненужным повторным визуализациям.

1
tarzen chugh 14 Дек 2018 в 19:23

Вы можете передать свои параметры в функцию более высокого порядка, которая поможет вам

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
  );
}
-1
Honza 28 Авг 2017 в 18:53