Reactjs兄弟クラストグル

Question

私は2つのクラス

ボタンを置くときにどのように私は兄弟ボックスが緑色に表示させることができますを使用したくありませんか？

現在のところ、すべてのボックスは緑色に覆われています。

以下はスニペットのコードです。

ご協力ありがとうございます。状態のホバーのアイテムのインデックスだけでなく、何かが推移しているかどうかを設定し

class Lol extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     green : false 
 
    }; 
 
    } 
 
    render =() =>{ 
 
    let green = (this.state.green) ? 'green' : ''; 
 
    let outs = []; 
 
    for(let i=0;i<5;i++){ 
 
     outs.push( 
 
     <div> 
 
      <button onMouseOver={() => { 
 
       this.setState({green : true}); 
 
      }} 
 
      onMouseLeave={() => { 
 
       this.setState({green : false}); 
 
      }} 
 
      > 
 
      Turn box green 
 
     </button> 
 
     <div className={'box '+green}> 
 
     </div> 
 
     </div> 
 
     ); 
 
    } 
 
    return (
 
     <div> 
 
     {outs} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<Lol />,document.getElementById("a"));

.box{ 
 
    border:1px solid #000; 
 
    height:20px; 
 
    width:20px; 
 
} 
 
.green{ 
 
    background:green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="a"> 
 
    </div>

Answer 1

。そして、現在の反復インデックスに保存されたインデックスを比較：

class Lol extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     greenIndex: null 
 
    }; 
 
    } 
 
    render =() =>{ 
 
    
 
    let outs = []; 
 
    for(let i=0;i<5;i++){ 
 
     const { greenIndex } = this.state; 
 
     const greenClass = (greenIndex === i) ? 'green' : ''; 
 

 
     outs.push( 
 
     <div> 
 
      <button onMouseOver={() => { 
 
       this.setState({ greenIndex: i }); 
 
      }} 
 
      onMouseLeave={() => { 
 
       this.setState({ greenIndex: null }); 
 
      }} 
 
      > 
 
      Turn box green 
 
     </button> 
 
     <div className={'box '+greenClass}> 
 
     </div> 
 
     </div> 
 
     ); 
 
    } 
 
    return (
 
     <div> 
 
     {outs} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<Lol />,document.getElementById("a"));

.box{ 
 
    border:1px solid #000; 
 
    height:20px; 
 
    width:20px; 
 
} 
 
.green{ 
 
    background:green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="a"> 
 
    </div>