Question

我正在构建最简单的不需要付款或授权的购物车系统，只需显示产品，我就可以...... p

我正在显示（映射）[购物车]中的所有商品，用户应该能够输入所需数量。

handleChange助手出现问题

我尝试传播并创建购物车副本

handleChange = (e) => {
    const lights = [ ...this.props.cart ]
    const editCount = { ...lights }
    editCount[e.target.name] = e.target.value
    this.setState({ editCount })
}

const finalCart = this.props.cart
        const cartCard = finalCart.map((light, i) => {
            return (
              <Card key={i}>
                <Container>
                    <Row>
                      <Col>
                      <Image alt="test" src={light.image} height="100"/>
                      </Col>
                      <Col>
                      <div id="lightName">{light.partnumber}</div>
                      <Form onSubmit={this.handleSubmit}>
                        <Form.Control size='sm' type='text' name='count' value={this.state.editCount.count} onChange={this.handleChange}/>
                        <Button variant="primary" type="submit">Submit</Button>
                      </Form>
                </Container>
              </Card>

我无法完全掌握动态变化，我可以从stackoverflow上的其他示例中对其进行硬编码，但是没有任何内容显示如何动态地抓住我单击（更改）的特定项目

我刚得到undefined

Answer 1

您是否尝试过使用onChange={() => this.handleChange(light.name, light.value)} 并直接在handleChange函数而不是事件中传递值可能像

handleChange = (name,value) => {
    const lights = [ ...this.props.cart ]
    const editCount = { ...lights }
    editCount[name] = value
    this.setState({ editCount })
}

Answer 2

handleChange = (e) => {
    const lights = [ ...this.props.cart ]
    const editCount = { ...lights }
    editCount[e.target.count] = e.target.value
    this.setState({ editCount })
}

e.target.count应该是e.target.name，但即使如此，您也无法分辨，要么给每个孩子一个唯一的名字，要么传递给handleChange {{1 }}：

id

如果您从不更改元素索引，则可以通过它而不是ID进行传递，此处的要点是您必须具有一个标识符，该标识符可以将一项与另一项进行区分

如何更改从状态react映射的数组中对象的值

2 个答案: