在 ReactJS 中删除一个项目

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

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

这是我的删除按钮元素：

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

我已经尝试遵循教程，但我不知道从这里该去哪里。如何删除搜索项？

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

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方法并传递新参数。fiddle

我希望它能帮助你。

Thanks