Функция onBlur для текстового поля, которое воспроизводит весь плейлист, не позволяет переходить к следующему текстовому полю.

Question

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

Я экспериментирую с перехватчиками React, и у меня есть плейлист, который содержит несколько компонентов, которые имеют текстовые поля ввода. изменение элемента в списке, к сожалению, отображает весь компонент списка воспроизведения, несмотря на запоминание, поэтому я пытаюсь переместить функцию сохранения списка воспроизведения в 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

Проблема, с которой вы столкнулись, заключается в том, что вы устанавливаете случайный ключ в каждом цикле рендеринга. React использует ключ для рендеринга производительности, однако, когда этот ключ рандомизирован, он сообщает, что новый элемент рендерит, или так и должно быть. В свою очередь, вход по существу размонтирован, а затем перемонтирован в DOM. Вот почему вы теряете фокус. Вместо этого вы должны постараться сохранить ключ как можно более постоянным (относящимся к отображаемому элементу).

Я не знаю модель проигрывателя, с которой вы работаете, но на той же странице я собираюсь написать интерфейс для машинописца:)

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