как я могу изменить значение объекта в массиве, отображаемом из состояния реагировать - PullRequest
Новая
       16

как я могу изменить значение объекта в массиве, отображаемом из состояния реагировать

0 голосов
/ 05 июля 2019

Я создаю простейшую систему корзины, которая не требует оплаты или авторизации, просто покажу продукт, и я нахожусь в точке, где ...

Я показываю (отображаю) все элементы в [корзине], и пользователь должен иметь возможность ввести желаемое количество.

возникли проблемы с моим помощником 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>

Я не могу ухватить динамический свет в моем handleChange, я могу жестко запрограммировать его из других примеров на stackoverflow, но ничто не показывает, как динамически получить конкретный элемент, форму которого я щелкаю (изменяю)

я просто получаю undefined

Ответы [ 2 ]

0 голосов
/ 05 июля 2019 
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 id тоже: 

onChange={e => this.handleChange(e, light.id)} //Assuming that you already have an unique light ID.

Если вы никогда не измените индекс элементов, вы можете передать его вместо идентификатора, суть в том, что у вас должен быть идентификатор, который отличает элемент от другого

0 голосов
/ 05 июля 2019

пытались ли вы использовать 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 })
}
...