如何從Reactjs中的陣列中刪除組件

Question

如何在單擊項目內的div時從data中刪除項目？

var App = React.createClass({ 
    ... 
    handleSubmit: function(e) { 
    this.state.data.push({ x: this.state.x }); 
    } 
}); 

該項目的類刪除。

var Item = React.createClass({ 
    render: function() { 
     return (
     <li> 
      <div onClick={this.removeItem}></div> 
     </li> 
    ) 
    } 
}); 

列表類。

var ItemList = React.createClass({ 
    render: function() { 
    var items = this.props.data.map(function(item) { 
     return <Item x={item.x}> 
    }); 
    } 
}); 

Answer 1

由於App組件管理data陣列，需要泡沫的移除請求從Item到ItemList到App一路。

所以傳遞迴調從App到ItemList：

var App = React.createClass({ 
    ... 
    removeItem: function(index) { 
    this.setState(function(state) { 
     var newData = state.data.slice(); 
     newData.splice(index, 1); 
     return {data: newData}; 
    }); 
    }, 
    render: function() { 
    return (
     ... <ItemList onRemove={this.removeItem} /> ... 
    ); 
    }, 
    ... 
}); 

，並傳遞迴調到每個Item：

最後，調用onRemove從Item：

var Item = React.createClass({ 
    ... 
    removeItem: function() { 
    this.props.onRemove(this.props.index); 
    }, 
});