在React中动态生成组件的引用？ [英] Refs for dynamically generated components in React?

问题描述

下面的代码是解释我的问题的最小工作示例。这段代码使用Array.map生成3个Note组件，当您按Enter键时，将使用对它的DOM元素的引用清空它们上方的静态生成的Note组件。

The code below is a minimal working example to explain my problem. This code generates 3 Note components using Array.map and when you hit enter in them it empties the statically generated Note component above them using a ref to its DOM element.

我想做的是让您打的便笺本身输入为空。我认为这需要为每个Note生成一个包含{id，ref}的动态数组，因此我可以将Note id传递给handleKeyDown，然后在refs数组中搜索该id并使用相应的ref来更改DOM元素。但是我很难弄清楚该怎么做。

What I want to do is instead have the Note you hit enter in empty itself. I think this would require generating a dynamic array containing {id, ref} for each Note, so I could pass the Note id to handleKeyDown then search the refs array for that id and use the corresponding ref to change the DOM element. But I'm having trouble figuring out how to actually do this.

我意识到这里没有必要使用refs，但这只是一个例子，因为我的实际代码很多

I realize using refs here isn't necessary but it's just an example since my actual code is a lot longer and calls 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;

推荐答案

您需要为所有注释存储一个单独的引用组件，然后将关注焦点的索引传递回handleKeyDown函数

You need to store a separate ref for all your Note components and then pass back the index of the Note in focus to the handleKeyDown function

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;

这篇关于在React中动态生成组件的引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！