data单击“项目”内的div时，如何从中删除项目？
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}>
});
}
});
由于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：
var ItemList = React.createClass({
render: function() {
var items = this.props.data.map(function(item, index) {
return <Item x={item.x} index={index} onRemove={this.props.onRemove}>
}.bind(this));
...
}
});
最后，调用onRemove来自Item：
var Item = React.createClass({
...
removeItem: function() {
this.props.onRemove(this.props.index);
},
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句