刪除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中的項目

回答

相關問題