javascript - react : The existing value of my text input gets cleared when onChange event occurs

Question

我是 Reactjs 新手。我正在尝试创建一个用户可以编辑自己的帖子的页面。因此，文本输入的值是用户在发布帖子时输入的。现在，当我尝试更改文本输入中的现有文本时，表单中可用的值将被清除，用户必须重新输入数据。

我需要用户更改输入文本中的现有文本，而不是重新输入。这是我的代码。

import React, { Component } from 'react'

class EditProduct extends Component {
    constructor(props) {
        super(props)
        this.state = {
            product: []
        }

        this.handleChange = this.handleChange.bind(this)
    }
    componentDidMount() {
        fetch("http://localhost:8000/lender/edit_product_display.php?id=" + this.props.match.params.productId)
            .then(response => response.json())
            .then((productResponse) => {
                this.setState({
                   product: productResponse
                })
            })
            .catch(error => console.log(error))
    }
    handleChange(event){
        const name = event.target.name

        this.setState({
            product: [{
                [name]: event.target.value
            }]
        })
    }
    render() {
        return(
            <div key={this.state.product.product_id}>
                Product ID: {this.props.match.params.productId}
                <br /><br />
                Product Name:
                <input
                    type="text"
                    name="product_name"
                    value={this.state.product.product_name}
                    onChange= {this.handleChange}
                />

                <br />
                Product Model:
                <input 
                    type="text"
                    name="product_model"
                    value={this.state.product.product_model}
                    onChange={this.handleChange}
                 />
            </div>
            )
    }
}

export default EditProduct

Answer 1

React 仅在顶层自动合并状态。它不会为您合并到 product 内部，因此您必须自己完成:

    handleChange(event){
        const name = event.target.name
        const value = event.target.value

        this.setState(prevState => ({
            product: {
                ...prevState.product,
                [name]: value
            }
        }))
    }