Reactでクリックしたもの以外のリスト項目を非表示にする

Question

私はループを通ってすべてのリスト項目が作成されるReactコンポーネントとしてHTMLリストを持っています。

これは私がReactで達成したいものです。リスト項目の1つの

隠すの

1. クリックして、私は
2. すべてのリスト項目を表示しているリスト項目をクリックし、今

を示すべき

をクリックした以外のすべてのリスト項目

アイデア

おかげ

イアン

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