reactjs - 删除子项的惯用方法

Question

我正在努力寻找从列表中删除子组件的方法。

这是一个jsbin这显示了我到目前为止所拥有的。

我在父组件的 render 方法中有以下代码，它生成这样的列表:

var items = this.state.items.map(function(item, i) {
  return (
    <Todo description={item} key={item} onClick={this.handleRemove.bind(this, i)}/>);
}.bind(this));

问题是点击时没有调用偶数处理程序。

解决此问题的另一种方法是在子组件上使用单击处理程序，但我不知道如何从父组件中删除该项目。

Answer 1

点击处理程序只能添加到基于 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;
}

最后，为了使表格正确显示动画，您需要告诉过渡组使用 tbody 而不是默认的 span:

<table>
  <ReactCSSTransitionGroup transitionName="example" component="tbody">
    {items}
  </ReactCSSTransitionGroup>
</table>

请参阅working jsbin here : http://jsbin.com/dakenabehi/3/edit?css,js,console,output