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

Question

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

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

1. 点击其中一个列表项
2. 隐藏除了我点击
之外的所有其他列表项
3. 点击显示
的列表项
4. 现在应显示所有列表项

有什么想法吗？

由于

伊恩

Answer 1

Try this :

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

And then :

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