Question

我有一个播放列表，我正在尝试将keyDown绑定到..问题是我无法使用典型的React.Component，因为我正在使用需要我使用的库（https://github.com/clauderic/react-sortable-hoc）功能无状态组件（SortableContainer）。所以我甚至无法访问道具或州。我试图将数据作为参数传递，但没有任何工作..

这样可行，但我需要以某种方式将数据传递给handleKeyDown ..特别是我真的想以某种方式将“props”传递给handleKeyDown

autocorrect="off"

Answer 1

使用arrow function，并在handleKeyDown函数中传递props和event对象。

像这样写：

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

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

Answer 2

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

onClick={clickHandler(passedData)}

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

箭头功能会导致不必要的重新渲染。

Answer 3

您可以将参数传递给更高阶的函数，这将为您提供技巧

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

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

3 个答案: