我正在努力寻找从列表中删除子组件的方法。
这是一个jsbin，显示了我到目前为止所拥有的。
我在生成这样的列表的父组件的渲染方法中有以下代码：
var items = this.state.items.map(function(item, i) {
return (
<Todo description={item} key={item} onClick={this.handleRemove.bind(this, i)}/>);
}.bind(this));
问题是没有在点击时调用 evenhandler。
解决此问题的另一种方法是在子组件上使用单击处理程序，但我不知道如何从父组件中删除该项目。
单击处理程序只能添加到基于 DOM 的组件中；如果要将它们添加到复合组件，则必须将它们传递给 DOM 组件，如下所示：
this.state.items.map(function(item, i) {
return (
<Todo description={item} key={item} onClick={this.handleRemove.bind(this, i)}/>);
}.bind(this));
// ...
var Todo = React.createClass({
render: function() {
return (
<tr onClick={this.props.onClick}>
<td>{this.props.description}</td>
</tr>
);
}
});
这会使您的 jsbin 的点击处理程序触发，但元素不会消失，直到您添加一些 CSS 转换（因为您使用的是 ReactCSSTransitionGroup）：
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0.01;
}
最后，为了使表格正确动画，您需要告诉过渡组使用 atbody而不是默认值span：
<table>
<ReactCSSTransitionGroup transitionName="example" component="tbody">
{items}
</ReactCSSTransitionGroup>
</table>
在此处查看工作 jsbin：http : //jsbin.com/dakenabehi/3/edit?css,js,console,output