Question

我有一个处理程序，它不能按我的要求工作……我需要能够更改许多项目的“数量”值。现在，使用我的处理程序，如果我尝试多个项目，它们将使用输入的最后一个值进行更新。因此，必须有一种方法可以让我输入多个值并以不同的方式更新项目。.这是我到目前为止所做的：

this.state.purchase.selected.map(item => {
                                    return (
                                        <Grid item xs={4}>
                                            <OrderItemsCard
                                                item={item}
                                                onChange={this.handleSelectedItemChange}
                                            />
                                        </Grid>
                                    )
                                })

      
        this.handleSelectedItemChange = this.handleSelectedItemChange.bind(this) 
 
 handleSelectedItemChange(event) {
        let query = Object.assign({}, this.state.purchase);
        query.selected.map(item => {
            item.quantity = event.target.value
        })
        this.setState({purchase: query})
    }

Answer 1

如果我的理解正确，则您需要一种与多个组件共享onChange函数的方法，从而设计出一种区分调用者的方法。

您可以简单地将item传递到onChange，并使用其值确定调用方并执行所需的任何操作。

这可以按照以下步骤进行，

this.state.purchase.selected.map(item => {
  return ( 
    <Grid item xs={4}>
      <OrderItemsCard 
        item={item}
        onChange={(event) => this.handleSelectedItemChange(item, event)}
      />
    </Grid>
  );
})

handleSelectedItemChange(item, event) {
    // ...
}

如何使React处理程序适用于多个值？

1 个答案: