React 中的表單更新：如果在提交時輸入為空，則輸入先前的數據將被刪除

Question

因此，我的表單輸入存在數據持久性問題。 如果我修改所有輸入，一切都很好。 但是，如果輸入為空，則在我提交時會刪除其先前的數據。 即使未修改輸入，我也需要為我的handleChange提供建議以保留數據。

我試過這個，但它也失敗了：

       handleChange = e => {
        e.persist();
      
        this.setState(prevState => ({
          product: { ...prevState.product,  [e.target.name]: e.target.value }
        }))
      }

這是我的EditForm，感謝您的幫助。

EditForm.js

export default class EditForm extends Component {

    constructor(props) {
        super(props);
        this.state = { product: [] };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    };
    
    componentDidMount = () => {
        axios
        .get(`/products/edit-form/${this.props.match.params.id}`)
        .then(response => {
            console.log(response.data.products);
            this.setState({
                product: response.data.products
            })
        });    
    };
  
 
      handleChange(e) {
        console.log(e.target.name);
        this.setState({[e.target.name]: e.target.value})        
    }

      
    handleSubmit(e) {
        const data = { 
            id: this.props.match.params.id,
            reference: this.state.reference,
            designation: this.state.designation        
            }

        e.preventDefault();         
        console.log(data);
        axios
        .post(`/products/${data.id}`, data )
        .then(res => console.log(res))      
        .catch(err => console.log(err));
    };
 
    renderForm() {
        return this.state.product.map((product, index) => {
            const { id,reference,designation } = product
        return(
            <>         
            <Form className="post" onSubmit={this.handleSubmit}>
                <Form.Row>
                    <Form.Group as={Col} controlId="formGridReference">
                    <Form.Label>Reference</Form.Label>
                    <Form.Control type="text" value={this.state.product.reference} 
                        onChange={this.handleChange} name="reference" placeholder={reference}/>
                    </Form.Group>

                    <Form.Group as={Col} controlId="formGridDesignation">
                    <Form.Label>Designation</Form.Label>
                    <Form.Control type="text" value={this.state.product.designation} 
                        onChange={this.handleChange} name="designation" placeholder={designation}/>
                    </Form.Group>
                </Form.Row>                

                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
            </>
            );
        })
    }
    
    render() {
        return (
            <div>
                <h1>Formulaire de modification</h1>
                {this.renderForm()}
            </div>        
        );
    }
}```

Answer 1

在您的 EditForm.js 中，在 handleChange() 中，您必須維護以前的 state。 您可以通過創建 state 的副本來做到這一點。 然后使用副本更新您的 state 屬性值，最后使用 this.setState();

示例：常量 state = this.state； state['你的財產'] = '價值'; ... ... this.setState(state);