Question

我试图在用户单击记录时删除它。

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

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>

以及下面的deleteItem函数。

deleteItem = event => {
    const newState = [...this.state.transactionInputs];
    newState.splice(event.target.value, 1);
    this.setState({transactionInputs: newState})
}

现在在名为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是未定义的，我不确定是否有我不理解的东西，或者仅仅是一个错误。

Answer 1

惯例是将像id这样的唯一值传递给删除回调。

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

然后在回调中对该ID进行过滤。

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

transactionInputs.filter(t => t.id !== id)返回一个新数组，其中所有事务的id与要删除的事务都不匹配。

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

我真的是React和ES6的新手。 deleteItem = {（）=> this.deleteItem（data.id）}的语法确实使我感到困惑。我们正在做'（）=>'，但是为什么我们要创建一个匿名函数来调用我们已经完成的函数呢？

好吧，这里实际上有两件事在起作用，（1）回调和（2）函数签名。

看来您了解回调部分，我将尝试解释签名部分。对于类似<div onClick={callback} />的组件或元素，发生的事情是onclick处理程序以该事件作为第一个参数直接调用指定的回调，例如callback(event)。这几乎等同于<div onClick={(event) => callback(event)} />，它只是一个接收事件然后调用回调的函数。如果回调函数的签名匹配（即它具有一个命名参数，它将接受它）。

在我们的情况下，我们不在乎事件对象 ，但是 我们要传递参数<div onClick={() => callback(newParameter)} >。 <div onClick={callback(newParameter)} >不起作用，因为您知道回调将立即被调用，因此我们必须将其包装在一个函数中。应该注意的是，有时您的代码可能会关心您要阻止触发默认表单操作的事件（例如表单上的事件）。

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

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

反应event.target.value正在重新调整未定义

1 个答案: