Идиоматический способ удалить ребенка

Question

Я изо всех сил пытаюсь удалить дочерний компонент из списка.

Вот 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 не вызывается по щелчку.

Другим способом приближения к этому было бы иметь обработчик щелчка на дочернем компоненте, но я не знаю, как удалить элемент из родительского компонента.

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