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。< / p>

因此，将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);
  },
});

如何从Reactjs中的数组中删除组件

1 个答案: