Как получить доступ к более чем одному элементу Dom в React с помощью React.createRef()

Question

Я знаю, как получить доступ к одному элементу dom с помощью React.createRef(). Но я хочу получить доступ к двум разным элементам с помощью createRef. Я видел пример stackru для динамического доступа к нескольким элементам, но не могу понять. Я прилагаю сюда свой простой код, в котором я хочу изменить цвет фона тега span при нажатии кнопки. После этого я написал React Docs. Может ли кто-нибудь помочь мне, что я здесь делаю неправильно.

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    // this.myRef = React.createRef();
    this.textInput = null;

    this.state = {
      fname:""
    }
  }

  setTextInputRef = element => {
    console.log("element",element);
    this.textInput = element;
  };

green = () =>{
  console.log("green ",this.textInput);
  /*   this.textInput.current.style.backgroundColor = "green"; */
  this.textInput.style.backgroundColor = "green";
}

red = () =>{
  console.log("red ",this.textInput);
  /*   this.textInput.current.style.backgroundColor = "red"; */
  this.textInput.style.backgroundColor = "red";
}

  render() {
    return (
      <div>
      {/* 
      <span id="green" ref={input => { this.setTextInputRef = input; }}>Green</span><br/>
      <span id="red" ref={input => { this.setTextInputRef = input; }}>Red</span><br/> 
      */}
      <span id="green" ref={this.setTextInputRef}>Green</span><br/>
      <span id="red" ref={this.setTextInputRef}>Red</span><br/>
      <button onClick={this.green}>For Green</button><br/>
      <button onClick={this.red}>For Red</button><br/>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

В приведенном выше коде. Если пользователь нажимает на btn, соответствующий цвет диапазона должен измениться.

Любая помощь будет оценена по достоинству.

вот jsfiddle для получения дополнительной информации

Answer 1

Вы можете создать несколько ссылок в своем конструкторе, если отображаемые элементы статичны и получить доступ к элементам, используя this.myRef.current

Ваш код с createRef будет выглядеть ниже

import React from "react";
import "./styles.css";

export default class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.greenInputRef = React.createRef();
    this.redInputRef = React.createRef();
    this.state = {
      fname: ""
    };
  }

  green = () => {
    console.log("green ", this.textInput);
    /*   this.textInput.current.style.backgroundColor = "green"; */
    this.greenInputRef.current.style.backgroundColor = "green";
  };

  red = () => {
    console.log("red ", this.textInput);
    /*   this.textInput.current.style.backgroundColor = "red"; */
    this.redInputRef.current.style.backgroundColor = "red";
  };

  render() {
    return (
      <div>
        {/* 
      <span id="green" ref={input => { this.setTextInputRef = input; }}>Green</span><br/>
      <span id="red" ref={input => { this.setTextInputRef = input; }}>Red</span><br/> 
      */}
        <span id="green" ref={this.greenInputRef}>
          Green
        </span>
        <br />
        <span id="red" ref={this.redInputRef}>
          Red
        </span>
        <br />
        <button onClick={this.green}>For Green</button>
        <br />
        <button onClick={this.red}>For Red</button>
        <br />
      </div>
    );
  }
}

Рабочая демонстрация

Если вы визуализируете фрагмент кода динамически, перебирая его в цикле, вы можете создать ссылку следующим образом:

constructor(props) {
   super(props);

   props.data.forEach(item => {
      this[`dataRef${item.id}] = React.createRef();
   })
}  

...
render() {
   return (
       <div>
        {
           data.map(item => 
              <p ref={this[`dataRef{item.id}]}>{item.name}</p>
           )
         }
       </div>
   )
}