Reactjs React event.target.value正在重新调整未定义

当用户单击某个记录时，我试图将其删除

屏幕上显示的列表类似于：

Sarah funds job
John loans Barry
Tom funds Ellie

在上面，这就是用户将看到的，在这个状态下，它的结构是这样的

state = {
    transactionInputs: [
        {id: 1, xParty: "Paul", yAction: "Funds", zParty: "Leon"},
        {id: 2, xParty: "Jerry", yAction: "Loans", zParty: "Tom"},
        {id: 3, xParty: "Sarah", yAction: "Repays", zParty: "Alex"},
    ],

在父组件中，下面是我调用和显示数据的方式。您可以看到我正在传递deleteItem方法，如下所示

    <div className={classes.resultborder}>
            {this.state.transactionInputs.map(data => {
                return (
                    <Inputs
                        key={data.id}
                        xParty={data.xParty}
                        zParty={data.zParty}
                        yAction={data.yAction}
                        deleteItem={this.deleteItem}/>
                );
            })}
        </div>

现在在名为Inputs的子组件中，我们只是返回

<div>
    <p className={classes.InputLayout} onClick={props.deleteItem}>
       {props.xParty} {props.yAction} {props.zParty}</p>
</div>

用户将看到xParty、yAction和zParty，我还传入了我们在父组件中创建的deleteItem函数，它是在onClick上设置的

---

这就是相关的代码，我遇到的问题是，在我的deleteItem函数中，event.target.value是未定义的，我不确定是否有我不理解的东西，或者它只是一个bug

惯例是向delete回调传递一个像id这样的唯一值

deleteItem={() => this.deleteItem(data.id)}

deleteItem = id => {
  const newTransactionInputs = this.state.transactionInputs.filter(t => t.id !== id);
  this.setState({transactionInputs: newTransactionInputs})
}

然后在回调中筛选该id

deleteItem={() => this.deleteItem(data.id)}

deleteItem = id => {
  const newTransactionInputs = this.state.transactionInputs.filter(t => t.id !== id);
  this.setState({transactionInputs: newTransactionInputs})
}

transactionInputs.filtert=>t.id！==id返回一个新数组，其中包含所有id与要删除的id不匹配的事务

[编辑以解决有关回调的第二个问题]

我是一个新的反应和ES6真的。deleteItem={=>this.deleteItemdata.id}这个语法确实让我感到困惑。我们正在做“=>”，但是为什么我们要创建一个匿名函数来调用我们已经创建的函数呢

这里有两件事在起作用，一是回调，二是函数签名

看来您理解回调部分，我将尝试解释签名部分。对于像这样的组件或元素，onclick处理程序调用指定的回调，该事件直接作为第一个参数，如callbackevent。这几乎等同于callbackevent}/>，它只是一个接收事件然后调用回调的函数。如果回调函数的签名匹配，即它有一个命名参数，它将接受它

在本例中，我们不关心事件对象，但希望传递一个参数callbacknewParameter}>。不会工作，因为您知道回调将立即被调用，所以我们必须将其包装在函数中。需要注意的是，有时您的代码可能会关心事件，例如在希望防止触发默认表单操作的表单上

clickHandler = (e, data) => {
  e.preventDefault();
  callback(data);
}

<div onClick={event => clickHandler(event, data)} />

---

您的event.target引用的是p标记，该标记当前不包含任何值。是的，我认为event.target.value或event.target.key可能能够访问状态中的id。谢谢，这是可行的，但我可以麻烦您解释一下其中一些是如何工作的。我是一个新的反应和ES6真的。deleteItem={=>this.deleteItemdata.id}这个语法确实让我感到困惑。我们正在做“=>”，但是为什么我们要创建一个匿名函数来调用我们所做的函数呢？哦，安全到家！希望这是一个伟大的通勤！所以如果我能总结一下发生了什么。。。我认为我们必须使用deleteItem={=>this.deleteItemdata.id}的原因是，它被包装在一个匿名函数中，该函数将仅在onClick上调用，而不是立即调用。类似这样的东西.handleChangedText会立即更改某个内容的文本。如果是否定的，则执行componentFn={this.handleChangedText}会立即调用它，请注意parans，但是componentFn={this.handleChangedText}正在保存对回调函数的引用，以便以后可以调用它。哦，好的，我想我需要再检查一下，我可以把我的头绕在它周围。为解释干杯！你帮了大忙@Drew！