Удалить элемент при нажатии, используя Reactjs

Question

Галерея изображений - это набор изображений с соответствующими кнопками удаления. Это код HTML для галереи с двумя изображениями:

<div>
  <div class="image">
    <img src="URL1">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="URL2">
    <button class="remove">X</button>
  </div>
</div>

Реализация компонента ImageGallery, который принимает опору ссылок и отображает галерею, описанную выше, так что первым элементом в опоре ссылок является sr c атрибут первого изображения в галерее. Следует также реализовать следующую логику c: при нажатии кнопки изображение, находящееся в том же элементе div, что и кнопка, должно быть удалено из галереи.

Например, после того, как первое изображение было Удалено из галереи выше, это HTML код должен выглядеть следующим образом:

<div>
  <div class="image">
    <img src="URL2">
    <button class="remove">X</button>
  </div>
</div>

Это решение, которое я реализовал, но оно не проходит тестовые случаи

class ImageGallery extends React.Component {
  constructor() {
    super();

  }
  remove = e => {
    Array.prototype.forEach.call(
      document.getElementsByClassName("remove"),
      function(elem) {
        elem.onclick = () => elem.parentNode.remove();
      }
    );
  };
  render() {
    return (
      <div>
        {this.props.links.map((item, index) => {
          return (
            <div key={item} className="image">
              <img key={index} src={item} />{" "}
              <button className="remove" onClick={this.remove}>
                X
              </button>
            </div>
          );
        })}
      </div>
    );
  }
}

document.body.innerHTML = "<div id='root'> </div>";

const rootElement = document.getElementById("root");
const links = ["URL1", "URL2"];
ReactDOM.render(<ImageGallery links={links} />, rootElement);
document.querySelectorAll(".remove")[0].click();
console.log(rootElement.innerHTML);

Вот демонстрационная версия песочницы - https://codesandbox.io/s/testdome-react-1-focus-7qbp1?file= / src / index. js

Пожалуйста, обратитесь к вопросу № 5 для получения подробной информации о тестовых случаях - https://www.testdome.com/d/react-js-interview-questions/304

Answer 1

Вам не нужны внешние прослушиватели событий и удаление dom-узлов, если не очень хорошая идея, когда вы реагируете на это. Вот как вы можете это сделать.

Обновленная песочница: https://codesandbox.io/s/testdome-react-1-focus-4627z?file= / src / index. js

class ImageGallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = { links: props.links };
  }
  remove = url => {
    console.log(url)
    this.setState(state => ({
      links: state.links.filter(l => l !== url)
    }));
  };
  render() {
    const { links } = this.state;
    return (
      <div>
        {links.map((item, index) => {
          return (
            <div key={item} className="image">
              <img key={index} src={item} alt="" />{" "}
              <button className="remove" onClick={() => this.remove(item)}>
                X
              </button>
            </div>
          );
        })}
      </div>
    );
  }
}