React 中的表单更新：如果在提交时输入为空，则输入先前的数据将被删除答案

【问题标题】：Form update in React : input previous data is erased if the input is left empty when submittedReact 中的表单更新：如果在提交时输入为空，则输入先前的数据将被删除
【发布时间】：2020-07-31 10:25:12
【问题描述】：

所以，我的表单输入存在数据持久性问题。如果我修改所有输入，一切都很好。但是，如果输入为空，则在我提交时会删除其先前的数据。我需要对我的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>        
        );
    }
}```

【问题讨论】：

标签： javascript reactjs input persistence

【解决方案1】：

在您的 EditForm.js 中，在 handleChange() 中，您必须保持之前的状态。您可以通过创建您的状态副本来做到这一点。然后使用副本更新您的状态属性值，最后使用 this.setState();

示例：常量状态 = this.state; state['你的财产'] = '价值'; ... ... this.setState(state);

【讨论】：