如何使用 ReactJS 中的单击事件从列表中删除项目？答案

【问题标题】：how to remove an item from a list with a click event in ReactJS?如何使用 ReactJS 中的单击事件从列表中删除项目？
【发布时间】：2015-01-07 10:23:59
【问题描述】：

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);

我似乎无法理解如何从列表中删除项目。新手们，可能还会在这里做出很多其他糟糕的设计决策。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

一个简化的example of this。

FilterApp 将删除函数传递给在onClick 事件上调用的FilterList。这将从父项中删除一个项目，更新状态，然后导致 FilterList 使用新内容重新渲染。

希望这会有所帮助。

【讨论】：

谢谢你 - 我花了很长时间试图解决这个问题，你的例子很好，很清楚！
谢谢你的简单例子，帮助我反应原生

【解决方案2】：

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

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);

【讨论】：