使用 Reactjs 单击时删除项目答案

【问题标题】：Remove an item on clicking using Reactjs使用 Reactjs 单击时删除项目
【发布时间】：2020-07-20 03:06:00
【问题描述】：

图片库是一组带有相应删除按钮的图片。这是包含两个图像的画廊的 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 组件，该组件接受 links 道具并呈现上述画廊，以便 links 道具中的第一项是画廊中第一张图像的 src 属性。它还应实现以下逻辑：单击按钮时，应从图库中删除与按钮在同一 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

【问题讨论】：

标签： javascript html css reactjs react-redux

【解决方案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>
    );
  }
}

【讨论】：

它没有按照沙盒演示的预期工作，请检查一次。另外我需要通过测试用例-testdome.com/d/react-js-interview-questions/304检查问题5
我添加了document.querySelectorAll(".remove")[0].click(); 行并且测试通过了。检查更新的沙盒
remove 方法没有删除项目，你能冻结更改，以便我可以检查正在工作的提琴手
为什么需要从remove中返回项目？
我不明白，remove方法不是删除你的沙盒演示中的项目

【解决方案2】：

这是正确答案

  class ImageGallery extends React.Component {
   constructor(props) {
       super(props);
       this.state = { links: props.links };
   }
   remove = index => {
      var list = this.state.links
      list.splice(index,1);
      this.setState({links:list})
     };

  render() {
    return (
     <div>
      {this.state.links.map((item, index) => {
       return (
        <div key={item} className="image">
          <img key={index} src={item} alt="" />
          <button className="remove" onClick={() => this.remove(index)}>
            X
          </button>
        </div>
         );
       })}
     </div>
    );
   }
  }
    document.body.innerHTML = "<div id='root'> </div>";

  const rootElement = document.getElementById("root");
   const links = ["www.goo.gl/kjzfbE", "www.goo.gl/d2JncW"];
  ReactDOM.render(<ImageGallery links={ links } />,
            rootElement);
  document.querySelectorAll('.remove')[0].click();
  console.log(rootElement.innerHTML);

【讨论】：