使用 onClick 从数组中删除元素并做出反应

Question

我对 JS 和 React 以及一般的编码非常陌生。我正在尝试使用 onClick 从数组中删除一个项目，如下所示：

const { Component } = React;


class Board extends Component{
  constructor(props) {
    super(props);
    this.state = {
    comments: [
        'I like Rosie',
        'I like you',
        'I like bacon',
        'lalalala'
      ],
    }
  }

  removeComment = (e) =>{

    var filteredArray = this.state.comments.filter(item => item !== e.target.value)
    this.setState({comments: filteredArray});
    console.log(e.target.value)
  }

  eachComment = (text, i) => {
    return ( <p id={i} key={i} > comment: {text} {i}</p> )
  }

  render(){
     console.log('render');
    return (
      <div className="gif-list" onClick={this.removeComment}>
        {this.state.comments.map(this.eachComment)}
      </div>
    );
  }


}



ReactDOM.render(
  <Board/>,
  document.querySelector('#mount'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="mount"><div>

虽然没有发生太多事情。我的 console.log(e.target.value) 以未定义的形式返回。我做错了什么？

我已尝试查看其他答案，但对其他类似问题实施（对我而言）抽象解决方案对我不起作用。

提前致谢，对于这么简单的问题，我们深表歉意。

Answer 1

您拥有事件处理程序的div 没有值属性。但即使它做到了，我也不认为它会做你想做的事。

您需要稍微更改您的代码以使其按您的意愿工作：

class Board extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
    comments: [
        'I like Rosie',
        'I like you',
        'I like bacon',
        'lalalala'
      ],
    }
  }

  removeComment = (e) =>{
    // Check the index in the filter to see if it should be kept or removed
    var filteredArray = this.state.comments.filter((item, i) => i != e.target.id)
    this.setState({comments: filteredArray});
    console.log(e.target.id)
  }

  eachComment = (text, i) => {
    // Move the event handler to be on each item
    return ( <p id={i} key={i}  onClick={this.removeComment}> comment: {text} {i}</p> )
  }

  render(){
    return (
      <div className="gif-list">
        {this.state.comments.map(this.eachComment)}
      </div>
    );

  }
}

ReactDOM.render(<Board />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

您会注意到重要的变化是：

1. 为每个映射元素提供删除处理程序
2. 使用事件目标中实际存在且可用于确定应删除哪个元素的属性。

Answer 2

这个需要在绑定onClick函数的时候专门传入参数

    return (
      <div className="gif-list" onClick={(e)=>this.removeComment(e)}>
        {this.state.comments.map(this.eachComment)}
      </div>
    );