在 ReactJS 中删除一个项目

Question

我是 React 的新手，并制作了一个允许保存搜索的应用程序。这将拉取 JSON，但当前是从静态数组 data 中拉取。我无法从搜索列表中删除搜索。

这是 jsbin： http ://jsbin.com/nobiqi/edit?js,output

这是我的删除按钮元素：

 var DeleteSearch = React.createClass({
  render: function() {
    return (
      <button onClick="this.props.deleteSearchItem" value={index}><i className="fa fa-times"></i>
        </button>
    );
  }
});

和我的功能

  deleteSearchItem: function(e) {
    var searchItemIndex = parseInt(e.target.value, 10);
    console.log('remove task: %d', searchItemIndex);
    this.setState(state => {
        state.data.splice(searchItemIndex, 1);
        return { data: state.data };
    });
  }

我已经尝试按照教程进行操作，但我不确定从这里去哪里。如何删除搜索项？

原文由 Virge Assault 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

让我猜猜，你在找这样的东西吗？

 class Example extends React.Component {
    constructor(){
    this.state = {
      data: [
        {id:1, name: 'Hello'},
        {id:2, name: 'World'},
        {id:3, name: 'How'},
        {id:4, name: 'Are'},
        {id:5, name: 'You'},
        {id:6, name: '?'}
      ]
    }
  }

  // shorter & readable
  delete(item){
    const data = this.state.data.filter(i => i.id !== item.id)
    this.setState({data})
  }

  // or this way, it works as well
  //delete(item){
  //  const newState = this.state.data.slice();
  //    if (newState.indexOf(item) > -1) {
  //    newState.splice(newState.indexOf(item), 1);
  //    this.setState({data: newState})
  //  }
  //}

  render(){
    const listItem = this.state.data.map((item)=>{
        return <div key={item.id}>
        <span>{item.name}</span> <button onClick={this.delete.bind(this, item)}>Delete</button>
      </div>
    })
    return <div>
        {listItem}
    </div>
  }
}

React.render(<Example />, document.getElementById('container'));

在此示例中，请注意我如何绑定 delete 方法并向其传递新参数。 小提琴

我希望它能帮助你。

谢谢

原文由 The Reason 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

OP在这里。因为四年后我对 React 有了更多的了解，并且仍然有很多观点，所以我想我会用我现在的处理方式来更新它。

SavedSearches.js

 import React from 'react'
import { SearchList } from './SearchList'

let data = [
    {index: 0, name: "a string", url: 'test.com/?search=string'},
    {index: 1, name: "a name", url: 'test.com/?search=name'},
    {index: 2, name: "return all", url: 'test.com/?search=all'}
  ];

let startingIndex = data.length;

export class SavedSearches extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            url: '',
            index: startingIndex,
            data: data
        }
        this.deleteSearch=this.deleteSearch.bind(this)
    }
    deleteSearch(deleteThis) {
        console.log(deleteThis);
        let newData = this.state.data.filter( searchItem => searchItem.index !== deleteThis.index )
        this.setState({
            data: newData
        })
    }

    render() {
        return (
            <div className="search-container">
                <SearchList data={this.state.data} onDelete={this.deleteSearch}/>
            </div>
        )
    }
}

在这里，我创建了一个名为 deleteSearch 的方法，它将一个对象作为参数。然后它在 this.state.data 数组上运行 .filter 以创建一个包含所有不满足条件的项目的新数组。条件检查数据数组中每个对象的 ID 是否与参数的 ID 匹配。如果是这样，那么它就是被删除的那个。由 .filter 创建的新数组设置为名为 newData 的变量，然后我使用 newData 更新状态

然后，我将此方法传递给名为 onDelete 的道具中的 SearchList 组件。

此方法还使用 .bind() 绑定在构造函数中，以便 this 将引用正确的 this 组件。

搜索列表.js

 import React from 'react'
import { SearchItem } from './SearchItem'
export class SearchList extends React.Component {
    render() {
      let searchItems = this.props.data.map((item, i) => {
        return (
          <SearchItem index={i} searchItem={item} url={item.url} onDelete={this.props.onDelete}>
            {item.name}
          </SearchItem>
        );
      });
      return (
        <ul>
          {searchItems}
        </ul>
      );
    }
}

我的 deleteSearch 方法只是在这里遍历组件树。 SearchList 接收方法作为道具 this.props.onDelete 并将其传递给 SearchItem 。

这里的另一个主要关键是 map 函数中的参数作为道具传递： searchItem={item} 。这将允许通过 props 访问整个当前对象；如果您还记得的话，我的 deleteSearch 函数将一个对象作为参数。

SearchItem.js

 import React from 'react'

export class SearchItem extends React.Component {
    constructor(props) {
        super(props);
        this.handleDelete=this.handleDelete.bind(this)
    }
    handleDelete() {
        this.props.onDelete(this.props.searchItem)
    }
    render() {
      return (
        <li key={this.props.index}> {/* Still getting a console error over this key */}
          <a href={this.props.url} title={this.props.name}>
            {this.props.children}
          </a>
          &nbsp;({this.props.url})
          <button onClick={this.handleDelete} value={this.props.index}><i className="fa fa-times"></i>
          </button>
        </li>
      );
    }
  };

现在我的方法到达了将要使用的地方。我创建了一个处理程序方法 handleDelete 并在内部访问了 deleteSearch 方法 this.props.onDelete 。然后，我将使用 this.props.searchItem 单击的列表项的对象传递给它。

为了在用户单击时使其工作，我必须添加一个 onClick 调用我的处理程序方法的事件侦听器，如下所示： onClick={this.handleDelete} 。最后一步是在 SearchItem 构造方法中绑定 this.handleDelete 。

现在，单击该按钮将从 this.state.data 数组中删除该项目。有关如何将项目添加到数组的示例，请参阅我的 存储库

原文由 Virge Assault 发布，翻译遵循 CC BY-SA 4.0 许可协议