Question

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

在父组件中，我有“状态”变量，这些变量包括形式（“联系人”）的信息以及是否应该显示弹出窗口（“ 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;

如何阻止父母完全重新渲染，但仍然根据“状态”的更改重新渲染孩子？

0 个答案: