如何在 ReactJS 中使用单击事件从列表中删除项目

how to remove an item from a list with a click event in ReactJS?

本文关键字：事件列表删除项目单击 ReactJS 更新时间：2023-09-26

var FilterList = React.createClass({
  remove: function(item){
    this.props.items = this.props.items.filter(function(itm){
      return item.id !== itm.id;
    });
    return false;
  },
  render: function() {
    var createItem = function(item) {
      return (
        <li>
          <span>{item}</span>
          <a href data-id="{item.id}" class="remove-filter" onClick={this.remove.bind(item)}>remove</a>
        </li>
      );
    };
    return <ul>{this.props.items.map(createItem.bind(this))}</ul>;
  }
});
var FilterApp = React.createClass({
  getInitialState: function() {
    return {items: [], item: {
      id: 0,
      type: null
    }};
  },
  onChangeType: function(e){
    this.setState({
      item: {
        id: this.state.items[this.state.items.length],
        type: e.target.value
      }
    });
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.item]);
    var item = {};
    this.setState({items: nextItems, item: {}});
  },
  render: function() {
    return (
      <div>
        <h3>Filters</h3>
        <FilterList items={this.state.items} />
        <form className="filter" onSubmit={this.handleSubmit}>
          <fieldset>
            <legend>Filter</legend>
            <div className="form-grp">
              <select name="type" onChange={this.onChangeType}>
                <option>foo</option>
                <option>bar</option>
                <option>baz</option>
              </select>
            </div>
          </fieldset>
          <div className="actions">
            <button>{'Add #' + (this.state.items.length + 1)}</button>
          </div>
        </form>
      </div>
    );
  }
});
React.render(<FilterApp />, document.body);

我似乎无法弄清楚如何从列表中删除项目。新手们，可能也会在这里做出大量其他糟糕的设计决策。

组件

上的 props 是不可变的，这意味着您不能直接修改它们。在上面的示例中，如果FilterList组件想要删除项目，则需要从父组件调用回调。

一个简化的例子。

FilterApp将删除函数传递给FilterList，该函数在 onClick 事件上调用。这将从父项中删除项，更新状态，然后使FilterList使用新内容重新呈现。

希望这有帮助。

像下面这样的东西应该可以工作。让您的根组件管理状态。

var FilterList = React.createClass({
  render: function() {
    var createItem = function(item) {
      return (
        <li>
          <span>{item}</span>
          <a href data-id="{item.id}" class="remove-filter" onClick={this.props.remove.bind(item)}>remove</a>
        </li>
      );
    };
    return <ul>{this.props.items.map(createItem.bind(this))}</ul>;
  }
});
var FilterApp = React.createClass({
  getInitialState: function() {
    return {items: [], item: {
      id: 0,
      type: null
    }};
  },
  onChangeType: function(e){
    this.setState({
      item: {
        id: this.state.items[this.state.items.length],
        type: e.target.value
      }
    });
  },
  remove: function(item, ev){
    ev.preventDefault();
    var items = this.state.items.filter(function(itm){
      return item.id !== itm.id;
    });
    this.setState({ items: items });
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.item]);
    var item = {};
    this.setState({items: nextItems, item: {}});
  },
  render: function() {
    return (
      <div>
        <h3>Filters</h3>
        <FilterList remove={this.remove} items={this.state.items} />
        <form className="filter" onSubmit={this.handleSubmit}>
          <fieldset>
            <legend>Filter</legend>
            <div className="form-grp">
              <select name="type" onChange={this.onChangeType}>
                <option>foo</option>
                <option>bar</option>
                <option>baz</option>
              </select>
            </div>
          </fieldset>
          <div className="actions">
            <button>{'Add #' + (this.state.items.length + 1)}</button>
          </div>
        </form>
      </div>
    );
  }
});
React.render(<FilterApp />, document.body);