隐藏除您在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'));