Question

import React, { Component } from 'react'
import ProductForm from '../components/ProductForm'
import shortid from 'shortid'

class AddProduct extends Component {

    constructor(props) {
        super(props)

        this.state = {
            products: [],
            currentProduct : {
                sku: '',
                productName: '',
                description: '',
                duration: '',
            }
        }       
    }

    handleChange = (e) => {
        console.log(e.target)
       this.setState({
           currentProduct: {
               sku: e.target.value,
               productName: e.target.value,
               description: e.target.value,
               duration: e.target.value
           }
       })
    }

    clickHandle = (e) => {
        e.preventDefault()

        const currentProduct = this.state.currentProduct;
        currentProduct.id = shortid.generate();

        this.setState({
            products: [...this.state.products, currentProduct]
        })
    }

    render() {

        return (
            <ProductForm 
                handleChange={this.handleChange}
                clickHandle={this.clickHandle}
                product={this.state.currentProduct}
            />
        )
    }
}

export default AddProduct

我正在尝试访问this.state.currentProduct，但它在（sku productName描述和持续时间）中也具有相同的值。我该如何解决它尝试[e.target.name]：e.target.value但不起作用。

它确实在this.state = {sku：''，productName：``，description：''，duration：''}内工作，但是如果我将其放入this.state = {currentProduct：{ sku：“，产品名称： ''，说明：“，持续时间：“， } }

Answer 1

您必须使用Spread Attributes，其目的是使道具的传递更加容易。这意味着您要提取对象中currentProduct的所有属性。

您的手柄更改事件应如下所示。

  handleChange = (e) => {
       this.setState({
           currentProduct: {
               ...this.state.currentProduct,
               [e.target.name]: e.target.value
           }
       })
    }

希望这对您有帮助！

对象中的状态数据如何获取值onchange事件

1 个答案: