Javascript 隐藏列表项，但在React中单击的项目除外

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

这就是我希望在React中实现的目标

单击其中一个列表项

隐藏除我单击的列表项之外的所有其他列表项

单击显示的列表项

所有列表项现在都应显示

有什么想法吗

谢谢

伊恩

试试这个：

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

类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
一个：“，
两个：“，
三个：，
四个：，
单击：false
}
}
handleClick（名称、事件）{
event.preventDefault（）；
if（this.state.clicked）{
this.setState（{one:，two:，three:，four:，clicked:false}）
}否则{
交换机（名称）{
案例“一”：
this.setState（{2:“隐藏”，3:“隐藏”，4:“隐藏”，单击：true}）；
打破
案例“二”：
this.setState（{1:“隐藏”，3:“隐藏”，4:“隐藏”，单击：true}）；
打破
案例“三”：
this.setState（{2:“隐藏”，1:“隐藏”，4:“隐藏”，单击：true}）；
打破
违约：
this.setState（{2:“隐藏”，3:“隐藏”，1:“隐藏”，单击：true}）；
}
}
}
render（）{
返回


;
}
}
React.render（，document.getElementById（'app'））；

你好，伊恩！看来你是个新手。请再读一遍。这样做会让其他用户有更好的机会给出您需要的答案。