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

如何从循环结果中更改元素的CSS？

1 个答案: