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