删除ReactJS中的项目

我是React的新手，并创建了一个应用程序，允许保存搜索。这将拉动JSON，但目前正在从静态数组data拉。我无法从搜索列表中删除搜索。删除ReactJS中的项目

这里的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 }; 
    }); 
    }

我试过以下教程，我不知道在哪里从这里出发。我如何删除搜索项目？

来源

2016-03-09 Virge Assault

'onClick =“this.props.deleteSearchItem”'看起来不正确。表达式放在大括号之间，就像你在'value = {index}' – elclanrs

''中做的那样'onClick = {this.props.deleteSearchItem}'？我不熟悉语法，因此非常有帮助。 –

花半个小时去http://facebook.github.io/react/docs/tutorial.html，并且贯穿整个过程。没有跳过部分，只是做它说的开始完成。无论你是新开发的web开发人员还是10多年经验丰富的专业人员，该教程都非常棒，可以帮助你了解基础知识，因此无需再次提出这些问题。 –

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

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: '?'} 
     ] 
    } 
    } 
    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

我希望它能帮助你。

谢谢

来源

2016-03-09 21:48:07

我怀疑这是非常高性能的长列表..我猜是存储一个id作为字符串在列表项目，然后检索这是更高性能，也许有一个更“原生”的方式与React做到这一点？ –

@AlexMills在这种情况下，你应该看看Flux或者Redux体系结构 –

ok thx，你能解释一下这可能如何解决这个问题吗？ –

删除ReactJS中的项目

回答

相关问题