javascript - 如何使 react 处理程序为多个值工作？

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