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

Question

我正在使用add button生成一个动态列表。我能够生成该动态列表。但是每个li也存在delete按钮。我想在按下删除按钮时删除该项目。我还要执行一个action redux。首先我不知道如何将点击事件绑定到动态生成的列表上，当用户按下删除按钮时出现错误

这是我的代码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'));

Answer 1

问题：

您在删除按钮得到一个错误，因为你正试图将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，因此可以使用提供词法作用域的箭头功能 。 我已经更新了您的代码。 在这里查看