Реагируйте: e.target.getAttribute ("id") работает в 20% случаев?

Question

Я новичок в React и пытаюсь исправить это часами.Я пытаюсь получить идентификатор кнопки, на которую нажимают, но она получает идентификатор только в 20% случаев, а в остальном возвращает нуль-текст.Я понятия не имею, что еще делать.Я пробовал разные методы привязки, но не смог заставить его работать.Любая помощь приветствуется!

Я упростил код и выложил его ниже.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Popupright extends React.Component {

popupnewshow = (e) => {
let ids = e.target.getAttribute("id") + "text";
console.log(ids)
let elements = document.getElementsByClassName('poprighttext showtext');
while(elements.length > 0){
  elements[0].classList.remove('showtext');
};
  document.getElementById(ids).classList.toggle("showtext");
};

render() {
  return (
    <div>
       <table className="table-bordered">
         <tbody>
          <tr className="table-samewidth">
            <td className="td-general"><button className="popup" id="xxx" onClick={this.popupnewshow}><div className="popuptitle">xxx</div></button></td>
          </tr>
          <tr className="table-samewidth">
            <td className="td-general"><button className="popup" id="yyy" onClick={this.popupnewshow}><div className="popuptitle">yyy</div></button></td>
          </tr>
          <tr className="table-samewidth">
            <td className="td-general"><button className="popup" id="zzz" onClick={this.popupnewshow}><div className="popuptitle">zzz</div></button></td>
          </tr>
        </tbody>
      </table>

      <div id="xxxtext" className="poprighttext">
          <p>xxx.</p>
      </div>
      <div id="yyytext" className="poprighttext">
          <p>yyy</p>
      </div>
      <div id="zzztext" className="poprighttext">
          <p>zzz</p>
      </div>
    </div>
  );
 }
}


export default Popupright;

Изображение консоли: кнопки должны давать идентификатор xxxtext, yyytext или zzztext в зависимости от нажатой кнопки, но это работает только в 20% случаев.Остальное возвращает нуль-текст и после нескольких щелчков возвращает снова правильный идентификатор

Answer 1

В общем, лучше избегать прямых манипуляций с DOM, таких как remove.Также вы можете получить идентификатор напрямую, а не из мероприятия:

const toggleItem = (arrayOfObjects, objectId) => {
  //some implementation of toggle object's vislble prop based on id property in array 
}

class Popupright extends React.Component {

  state = {
    popups: [
      {id: 'xxx', text: 'xxxtext', visible: false},
      {id: 'yyy', text: 'yyytext', visible: false},
      ...
    ]
  }

  togglePopup = id => {
    this.setState(prevState => ({
      popups: [...toggleItem(prevState.popups, id)]
    })
  }

  render() {
    return (
      <table>
        ...
        <td>
          <button onClick={() => this.togglePopup('xxx')} />
        </td>
        ...
      </table>

      <div className="popupsWrap">
        {this.state.popups.map(popup => {
          if (popup.visible) {
            return (
              <div className="poprighttext">{popup.text}</div>
            )
          }
        }}
      </div>
...

Answer 2

Использование e.currentTarget.id должно решить вашу проблему.

e.target содержит элемент, на который вы щелкнули, но e.currentTarget будет содержать элемент, с которым вы связали обработчик.

При использовании e.currentTarget:

<button className="popup" id="xxx" onClick={this.popupnewshow}>
   <div className="popuptitle">xxx</div><!-- clicking on here: 
    e.currentTarget.id is xxx -->
</button>

При использовании e.target:

<button className="popup" id="xxx" onClick={this.popupnewshow}>
   <div className="popuptitle">xxx</div><!-- clicking on here: 
    there's no id here (the clicked element id) -->
</button>