如何從循環結果更改元素的CSS？

Question

我最近使用React開發的，但我發現無法從循環結果中更改元素的CSS（某些字段或類名稱的值）。例如：

const {data} = this.props; 

map(data, (result, index) => 
    <div key={index} className="result-main animated bounceIn"> 
    <div className="result-content">{result.name}</div> 
    <span 
     className="result-remove" 
     onClick={() => this.handleRemove(result.id)} 
    >X</span> 
    </div> 
) 

現在，我想通過handleRemove(param)刪除元素，改變它的類名，如：bounceIn變化成bounceOut，從而產生動畫效果。有什麼辦法可以幫我解決這個問題嗎？（當我點擊<span>，父母<div>的班名將會改變）

期待你的回答！

Answer 1

參考鏈接http://plnkr.co/edit/wFUtCfOYqTYfUFTn1sBk?p=preview

var HideMe=React.createClass({ 
    Hide:function(event) 
    { 
    var Selected=$(event.target)[0].id; 
    $("#"+Selected).removeClass('show'); 
    $("#"+Selected).addClass('hide'); 
    }, 
    Show:function(event) 
    { 
    var Selected=$(event.target)[0].id; 
    $("#"+Selected).removeClass('hide'); 
    $("#"+Selected).addClass('show'); 
    }, 
    render:function() 
    { 
    return(
     <div> 
     <div> 
     <span id="1" onClick={this.Hide}>Click me to Hide</span> 
     <input type="button" id="1" value="Show" onClick={this.Show}/> 
     </div> 
    <div> 
     <span id="2" onClick={this.Hide}>Click me to Hide</span> 
     <input type="button" id="2" value="Show" onClick={this.Show} /> 
    </div> 
     </div> 

    ) 
    } 
}); 
React.render(
    <HideMe />, 
    document.getElementById('example') 
);