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

Question

我对JS和React和编码一般来说是新手。我正在尝试使用onClick从数组中删除一项，如下所示：

import React, { Component } from '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(){

    return (
      <div className="gif-list" onClick={this.removeComment}>
        {this.state.comments.map(this.eachComment)}
      </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" />

Answer 2

为此，绑定onClick函数时，需要专门传递参数

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