Ссылки для динамически генерируемых компонентов в React?

Приведенный ниже код представляет собой минимальный рабочий пример, объясняющий мою проблему. Этот код генерирует 3 компонента Note с помощью Array.map, и когда вы нажимаете в них Enter, он очищает статически сгенерированный компонент Note над ними, используя ссылку на его элемент DOM.

Вместо этого я хочу, чтобы заметка, которую вы нажимаете, была пустой. Я думаю, это потребует создания динамического массива, содержащего {id, ref} для каждой заметки, поэтому я мог бы передать идентификатор заметки в handleKeyDown, затем выполнить поиск в массиве refs для этого идентификатора и использовать соответствующий ref для изменения элемента DOM. Но мне сложно понять, как это сделать на самом деле.

Я понимаю, что использовать здесь refs не обязательно, но это просто пример, поскольку мой реальный код намного длиннее и вызывает focus ().

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.notes = [
      { text: "Hello world 1", id: 1 },
      { text: "Hello world 2", id: 2 },
      { text: "Hello world 3", id: 3 }
    ];
    this.ref = React.createRef();
  }

  handleKeyDown = event => {
    if (event.key === "Enter") {
      event.preventDefault();
      this.ref.current.textContent = "";
    }
  };

  render() {
    return (
      <div>
        <Note
          text = {"StaticNote"}
          key = {0}
          id = {0}
          handleKeyDown = {this.handleKeyDown}
          innerRef = {this.ref}
        />
        {this.notes.map(note => (
          <Note
            text = {note.text}
            key = {note.id}
            id = {note.id}
            handleKeyDown = {this.handleKeyDown}
          />
        ))}
      </div>
    );
  }
}

class Note extends Component {
  render() {
    return (
      <p
        ref = {this.props.innerRef}
        contentEditable
        onKeyDown = {this.props.handleKeyDown}
      >
        {this.props.text}
      </p>
    );
  }
}

export default App;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
8
0
10 266
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо сохранить отдельную ссылку для всех ваших компонентов Note, а затем передать индекс заметки в фокусе функции handleKeyDown.

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.notes = [
      { text: "Hello world 1", id: 1, ref: React.createRef() },
      { text: "Hello world 2", id: 2, ref: React.createRef() },
      { text: "Hello world 3", id: 3, ref: React.createRef() }
    ];
  }

  handleKeyDown = (event, index) => {
    if (event.key === "Enter") {
      event.preventDefault();
      this.notes[index].ref.current.textContent = "";
    }
  };

  render() {
    return (
      <div>
        <Note
          text = {"StaticNote"}
          key = {0}
          id = {0}
          handleKeyDown = {this.handleKeyDown}
          innerRef = {this.ref}
        />
        {this.notes.map((note, index) => (
          <Note
            index = {index}
            innerRef = {note.ref}
            text = {note.text}
            key = {note.id}
            id = {note.id}
            handleKeyDown = {this.handleKeyDown}
          />
        ))}
      </div>
    );
  }
}

class Note extends Component {
  render() {
    return (
      <p
        ref = {this.props.innerRef}
        contentEditable
        onKeyDown = {(e) => this.props.handleKeyDown(this.props.index)}
      >
        {this.props.text}
      </p>
    );
  }
}

export default App;

Другие вопросы по теме