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

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) {
    // ...
}