如何使用反应中的删除按钮从列表中删除项目？

Question

I am generating a dynamic list using add button .I am able to generate the dynamic list .But there is delete button also present in each li .I want to delete the item when delete button is pressed .I make a action as well redux.Firstly I don''t know how to bind click event on dynamic generated list.I am getting error when user press delete button

here is my code https://plnkr.co/edit/JEG6o4JCBIQWAt2A4S3r?p=preview // Code goes here

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

Answer 1

The Problem:

You get an error in the delete button because the this you are trying to access inside the this.props.names.map is not the component's this.

Solution :

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

Since you are using ES6, you can use arrow functions which provide lexical scoping. I have updated your code. Check it out here