1

我有一个典型的客户表格，我希望用户在提交信息之前对其进行审查。我的想法是让用户单击表单底部的“提交信息”按钮，该按钮会弹出一个汇总输入数据的弹出窗口。这个弹出窗口位于原始表单之上，包括“提交”和“编辑”按钮。“提交”按钮将信息发送到我的后端服务器并关闭弹出窗口，而“编辑”按钮关闭弹出窗口并允许用户更改客户表单中的信息。

在父组件中，我有“状态”变量，其中包括表单中的信息（“联系人”）以及是否应显示弹出窗口（“initialSubmit”）。

“initialSubmit”的值通过“show”道具传递给Modal（即弹出窗口），并告诉它显示或隐藏弹出窗口。

当我单击“提交信息”按钮时，“initialSubmit”更改为“true”，并且确实出现了弹出窗口。

但是，应用程序几乎立即重新渲染并将“initialSubmit”更改回“false”，导致弹出窗口消失。

如果“initialSubmit”的值发生了变化，我考虑过使用“shouldComponentUpdate”来停止重新渲染。但是，我下面的代码会引发错误。

我什至不知道使用“状态”变量是否是控制弹出窗口可见性的正确方法。

有什么建议么？谢谢。

import React, { Component } from 'react';
import { Form, Row, Col, Button, Container } from 'react-bootstrap';

import Aux, axios. Modal, ContactSummary from '../...';

import classes from './Contact.css';

class Contact extends Component {
    state = {
        initialSubmit: false,
        contact: {
            firstName: 'Tom',
            lastName: 'Smith'
        }
    }

    openContactSummaryHandler = () => {
        this.setState({initialSubmit: true});
    }

    submitCustomerInfoHandler = (event) => {
        const data = {
            firstName: this.state.contact.firstName,
            lastName: this.state.contact.lastName
        };

        axios.post('https://openseatdirect.firebaseio.com/customers/.json', data);

        this.setState({initialSubmit: false});

    }

    editCustomerInfoHandler = () => {
        this.setState({initialSubmit: false});
    }

    shouldComponentUpdate (props, state) {
        return this.state.contact === this.nextState.contact
    }

    render () {
        return (
            <Aux>
                <Modal show={this.state.initialSubmit}>
                    <ContactSummary contactInfo={this.state.contact}
                        submit={this.submitCustomerInfoHandler}
                        edit={this.editCustomerInfoHandler}></ContactSummary>
                </Modal>

                <div className={classes.MessageContainer}>
                    <Form className={classes.ContactForm}>
                        <Form.Row>
                            <Form.Label> First Name </Form.Label>
                            <Form.Control type="text" value={this.state.contact.firstName} onChange={(event) => this.setState({contact: {...this.state.contact, firstName: event.target.value}})}/>
                        </Form.Row>

                        <Form.Row>
                            <Form.Label> Last Name </Form.Label>
                            <Form.Control type="text" value={this.state.contact.lastName} onChange={(event) => this.setState({contact: {...this.state.contact, lastName: event.target.value}})}/>
                        </Form.Row>

                </div>

                <div className={classes.Button}>
                    <button onClick={this.openContactSummaryHandler}>
                        Submit Information
                    </button>
                </div>

            </Aux>
        )
    }
}
export default Contact;
4

0 回答 0