javascript - 重新渲染整个播放列表的文本框上的 onBlur 函数阻止了切换到下一个文本框的能力

Question

function handleBlur(event) {
  if (event.target.value !== props.value) {
    // a hook function that ends up rerendering the whole playlist
  }
}

我正在尝试使用 React hooks，并且我有一个播放列表，其中包含一堆具有输入文本框的组件。不幸的是，尽管有内存功能，但修改列表中的项目似乎会渲染整个播放列表组件，因此我尝试将保存播放列表功能移至 onBlur 而不是 onChange。但是当我在文本框上并点击选项卡时，一旦重新渲染发生，我就会失去所在文本框的选项卡焦点。有什么办法可以防止这种情况发生吗？当我只想修改列表中的一个对象时，有关如何防止重新渲染整个播放列表的任何提示也很好

playerList.map((player, index) => (
  <DraftPlayer
     arrayPosition={index}
     key={index + (Math.random()).toString()}
     modifyPlayer={modifyPlayer}  //hook function
     player={player}
   />
 ))

const [playerList, setPlayerList] = React.useState(
    initializePlayerListArray([ { firstName: "", lastName: "" },{ firstName: "", lastName: "" },{ firstName: "", lastName: "" },{ firstName: "", lastName: "" },{ firstName: "", lastName: "" },etc ])
  );

Answer 1

您遇到的问题是因为您在每个渲染周期设置随 secret 钥。 React 使用该键来提高渲染性能，但是当该键被随机化时，它会告诉 React 一个新项目正在被渲染，或者它应该被渲染。反过来，输入本质上被卸载，然后重新安装到 DOM 中。这就是为什么你最终会失去焦点。相反，您应该尝试使键尽可能保持不变(与正在渲染的项目相关)。

我不知道您正在使用的播放器模型，但在同一页面上我将为播放器编写一个 typescript 界面:)

interface Player {
  id: number
  firstname: string
  lastname: string
  /* ... etc */
}

然后我会这样创建你的项目

playerList.map((player, index) => (
  <DraftPlayer
     arrayPosition={index}
     key={player.id}
     modifyPlayer={modifyPlayer}  //hook function
     player={player}
   />
))