隐藏列表项，您在 React 中单击的项除外

Posted 2023-02-22

【中文标题】隐藏列表项，您在 React 中单击的项除外

【英文标题】：Hide list items except the one you click on in React

【发布时间】：2016-12-11 16:23:46

【问题描述】：

我有一个 html 列表作为 React 组件，其中所有列表项都是从我循环的一些数据创建的。

这就是我想在 React 中实现的目标。

单击列表项之一 隐藏除我单击的项目之外的所有其他列表项目 单击显示的列表项 现在应该显示所有列表项

有什么想法吗？

谢谢

伊恩

【问题讨论】：

嗨伊恩！看来您是 *** 的新手。请阅读How to create a Minimal, Complete, and Verifiable example。这样做会让其他用户更有机会给出您需要的答案。

【参考方案1】：

试试这个：

<div id="app"></app>

然后：

class Application extends React.Component 
  constructor(props)
    super(props);

    this.state = 
      one: "",
      two: "",
      three: "",
      four: "",
      clicked: false
    
  

  handleClick(name, event)
    event.preventDefault();
    if(this.state.clicked)
      this.setState(one: "",two: "", three: "", four: "", clicked: false)
    else
      switch(name)
        case "One":
          this.setState(two: "hide", three: "hide", four: "hide", clicked: true);
          break;
          case "Two":
          this.setState(one: "hide", three: "hide", four: "hide", clicked: true);
          break;
          case "Three":
          this.setState(two: "hide", one: "hide", four: "hide", clicked: true);
          break;
          default:
          this.setState(two: "hide", three: "hide", one: "hide", clicked: true);
      
    
  

  render() 
    return <div>
      <ul>
        <a href="" className=this.state.one onClick=this.handleClick.bind(this, "One")><li >One</li></a>
        <a href="" className=this.state.two onClick=this.handleClick.bind(this, "Two")><li>Two</li></a>
        <a href="" className=this.state.three onClick=this.handleClick.bind(this, "Three")><li>Three</li></a>
        <a href="" className=this.state.four onClick=this.handleClick.bind(this, "Four")><li>Four</li></a>
      </ul>
    </div>;
  



React.render(<Application />, document.getElementById('app'));