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

问题在于，没有在点击时调用evenhandler。

接近这个的另一种方法是在子组件上使用click处理程序，但我不知道如何从父组件中删除该项。

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

习惯移除孩子的方法

1 个答案: