Question

在我的react.js项目中，我有父级和子级组件（类似于父级的页面和带有子级输入的模态）。我通过ajax请求在父级中接收数据，并将其传递给父级到子级的输入，并用它填充子级状态。同样在子组件中，我有2个按钮：“提交”和“取消”。考虑以下代码：

**Parent**

render() {
    const { projectAux } = this.props;
    return (
        <ProjectNameFormModal
                projectAux={projectAux}
                onVisibleChange={e => this.onVisibleProjectNameFormModalChange(e)}
                visible={this.state.editProjectNameModalVisible}
            />
    )

}

**Child**

import React from 'react';

import {Button, Checkbox, Form, Input, List, Modal, Select} from "antd";

class ProjectNameFormModal extends React.Component{
  constructor(props){
    super(props);
    this.state = {
        projectAux: props.projectAux,
        visible: props.visible

    }
}

shouldComponentUpdate(nextProps, nextState, nextContext) {
    if(this.state.projectAux != nextProps.projectAux){
        this.setState({
            projectAux:  nextProps.projectAux,
            visible: nextProps.visible
        });
    }
    return true;

}

handleProjectNameInputChange = e => {
    let current_state  = this.state;
    current_state.projectAux[e.target.name] = e.target.value;
    this.setState(current_state);
}

handleCancelSubmitProjectNameUpdate = e => {
    this.props.onVisibleChange(false);
}

handleSubmitProjectNameUpdate = e => {
    console.log(' in handleSubmitProjectNameUpdate');
    this.setState({...this.state, visible: false});
    this.props.onVisibleChange(false);
}

render() {

    return (
        <Modal
            title='Edit project Name'
            visible={this.props.visible}
            bodyStyle={{}}//height:"800px"
            onSave={{}}
            maskClosable={false}
            onCancel={this.handleCancelSubmitProjectNameUpdate}
            footer={[
                <Button key="back" onClick={this.handleCancelSubmitProjectNameUpdate}>
                    Cancel
                </Button>,
                <Button key="submit" type="primary" onClick={this.handleSubmitProjectNameUpdate}>
                    Save
                </Button>,
            ]}
        >
            <div>
                <Input placeholder="ProjectName"
                       name="name"
                       onChange={this.handleProjectNameInputChange}
                       value={this.state.projectAux && (this.state.projectAux.name)}
                />
            </div>
        </Modal>
     );
   }
}

export default ProjectNameFormModal;

所以问题是当我输入一些新数据以输入然后按Cancel按钮时，我的父状态也更新为我绝对不想发生的新数据。当按下取消时，不会发生对父状态的更新，但是会发生。顺便说一句，当我在输入中输入新符号时，父状态不会更新。我尝试使用传播运算符，因为它说here，但没有用。

欢迎提出任何解决方法，谢谢。

react.js如何避免子组件取消上的父状态更新

0 个答案: