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

Question

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

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

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

有什么想法吗？

谢谢

伊恩

Answer 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'));