如何從列表中刪除項目使用刪除按鈕在反應？

我正在使用add button生成一個動態列表。我可以生成動態列表。但有delete按鈕也存在於每個li。我想刪除該項目時按下刪除按鈕。我做一個action以及還原本文首先我不知道如何綁定動態生成list.I單擊事件我得到錯誤，當用戶按下刪除鍵如何從列表中刪除項目使用刪除按鈕在反應？

這裏是我的代碼 https://plnkr.co/edit/JEG6o4JCBIQWAt2A4S3r?p=preview //代碼放在這裏

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux; 
const { Provider, connect } = ReactRedux; 
const thunk = window.ReduxThunk.default; 


const first_redux =function(state =[] ,action){ 
    switch (action.type){ 
    case 'ADD_ITEM': 
    return [ 
     ...state, 
     action.payload 
     ]; 
     case 'DELETE_ITEM': 
     var index = state.indexOf(action.payload); 
    return state.slice(index,1); 
    default : 
    return state 

    } 
} 

const actions ={ 
addItem :function(item){ 
    return { 
    type :"ADD_ITEM", 
    payload :item 
    } 
} , 
deleteItem :function(item){ 
    return { 
    type :"DELETE_ITEM", 
    payload :item 
    } 
} 

} 
var combindReducer = combineReducers({ 
    item:first_redux 
}) 

const store = createStore(combindReducer); 

class First extends React.Component { 
    constructor (props){ 
    super(props); 
    this.state = { 
     names :[], 
     username :'' 
    } 
    this.changeEv =this.changeEv.bind(this); 
    this.addName =this.addName.bind(this); 
    this.handle =this.handle.bind(this); 

    } 
    changeEv(e){ 
    this.setState({ 
     username : e.target.value 
    }) 
    } 
    addName(){ 
    if(this.state.username !== ''){ 
    this.props.add(this.state.username) 
    this.setState({ 
     username : '' 
    }) 
    } 
    } 
    handle(){ 
    alert('---') 
    } 

    render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    var listItems = this.props.names.map(function(d, idx){ 
     return (<li key={idx}><span>{d}</span><button onClick={this.handle}>delete</button></li>) 
    }) 
    return (
     <div> 
     <input type="text" onChange ={this.changeEv} value={this.state.username}/> 
     <button onClick={this.addName}>add</button> 
     {listItems} 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state){ 
    console.log('================='); 
    console.log(state); 
    return { 
     names: state.item, 

    }; 
    console.log(this.state); 

} 

function mapDispatchToProps(dispatch){ 
    return { 
    add:bindActionCreators(actions.addItem,dispatch) 
    } 
} 
const Appcontainer =connect(mapStateToProps,mapDispatchToProps)(First) 

ReactDOM.render(
    <Provider store ={store}> 
    <Appcontainer/> 
    </Provider> 
    ,document.getElementById('root'));

來源

2017-01-01 user944513

該plunkur不工作。當我點擊添加，我沒有看到生成列表 – Swapnil

問題：

您在刪除按鈕由於這你正試圖將this.props.names.map內訪問得到一個錯誤，是不是該組件的這一點。

解決方案：

var listItems = this.props.names.map((d, idx) => { 
    return (<li key={idx}><span>{d}</span><button onClick={this.handle}>delete</button></li>) 
})

由於您使用ES6，您可以使用arrow functions其提供詞法範圍。我已更新您的代碼。檢查出來here

來源

2017-01-01 19:52:08 Swapnil

那麼如何刪除元素？ – user944513

我已經使用刪除功能更新了plunkur。只需將delete操作作爲prop提供給mapDispatchToProps中的組件（就像添加元素一樣）。 – Swapnil

我已經完成了，感謝您的幫助 – user944513

如何從列表中刪除項目使用刪除按鈕在反應？

回答

相關問題