在 ReactJS 中删除项目 [英] Deleting an item in ReactJS

问题描述

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

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

这是我的删除按钮元素:

var DeleteSearch = React.createClass({渲染:函数(){返回 (<button onClick="this.props.deleteSearchItem" value={index}><i className="fa fa-times"></i>);}});

和我的功能

 deleteSearchItem: function(e) {var searchItemIndex = parseInt(e.target.value, 10);console.log('删除任务:%d', searchItemIndex);this.setState(state => {state.data.splice(searchItemIndex, 1);返回 { 数据:state.data };});}

我已经尝试过遵循教程，但我不知道从哪里开始.如何删除搜索项?

解决方案

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

class Example extends React.Component {构造函数(){this.state = {数据: [{id:1, name: '你好'},{id:2，名称:'世界'}，{id:3，名称:'如何'}，{id:4，名称:'是'}，{id:5, name: '你'},{id:6, name: '?'}]}}//更短 &可读的删除(项目){const data = this.state.data.filter(i => i.id !== item.id)this.setState({数据})}//或者这样，它也能工作//删除(项目){//const newState = this.state.data.slice();//if (newState.indexOf(item) > -1) {//newState.splice(newState.indexOf(item), 1);//this.setState({data: newState})//}//}使成为(){const listItem = this.state.data.map((item)=>{return 
<span>{item.name}</span><button onClick={this.delete.bind(this, item)}>Delete</button>
})返回 
{项目清单}
}}React.render(, document.getElementById('container'));

在这个例子中注意我如何绑定 delete 方法并传递新参数.小提琴

希望能帮到你.

谢谢

I'm new to React and made an app that allows searches to be saved. This will pull JSON but is currently pulling from a static array data. I'm having trouble being able to delete searches from the search list.

Here's the jsbin: http://jsbin.com/nobiqi/edit?js,output

Here's my delete button element:

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

and my function

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

I've tried following tutorials and I'm not sure where to go from here. How can I delete the search items?

解决方案

Let me guess, Are you looking for something like this?

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

In this example pay attention how i'm binding delete method and pass there new parameter. fiddle

I hope it will help you.

Thanks

这篇关于在 ReactJS 中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！