Javascript 如何在编辑模式下提交表单按钮后设置组件的初始状态

如何在提交表单按钮后设置组件的初始状态。

您好，我有一个动态创建表单的组件 使用状态，作为创建和更新 输入表单的值并选择表单

现在，此组件在2个条件下运行 1）创建模式 2） 编辑模式

创建模式 创建模式工作良好，因为它在重置后设置值 使用this.bind=this.state

和resetForm函数，它保存了prevState，我曾经使用过它 在单击“提交”按钮离开之前设置

因此，它将作为流的新状态作为初始状态传递给其他状态 价值观

2） 编辑模式

编辑模式以相同的状态和逻辑工作，我会记录每个模式的数据 对象表单中的输入字段，稍后我尝试在其中填充值 在其state.studentDetail.firstname.value状态中，用户可以 根据需要更改和更新值

单击“提交”按钮时， 当我按下Submit Form按钮时，ResetForm函数不起作用 导致输入元素再次以旧值向上字段的初始状态

因此，当我进入创建模式时，我需要在提交按钮之后设置初始状态。

> export default class StudentForm extends Component {
>     constructor(props){
>         super(props);
>         this.state = {
>             studentDetail: {
>                 firstName: {
>                     elementType: 'input',
>                     elementConfig: {
>                         type: 'text',
>                         placeholder: 'First Name',
>                     },
>                     className: "form-control mb-2",
>                     value: "",
>                     label: "First name",
>                     validation:{
>                         required : true
>                     },
>                     valid:false,
>                     touched :false
>                 },
>                 lastName: {
>                     elementType: 'input',
>                     elementConfig: {
>                         type: 'text',
>                         placeholder: 'Last Name',
>                     },
>                     className: "form-control mb-2",
>                     value: "",
>                     label: "Last name",
>                     validation:{
>                         required : true
>                     },
>                     valid:false,
>                     touched :false
>                 },
>                 gender: {
>                     elementType : "select",
>                     elementConfig : {
>                         placeholder: "Select Gender",
>                       options:[
>                       { name : "Male"},
>                       { name : "Female"},]
>                     },
>                     className:"form-control mb-2",
>                     label : "Gender",
>                     value: "--Choose Gender--",
>                     valid:false,
>                     validation:{},
>                     touched :false
>                 },
>                 street: {
>                     elementType: "textarea",
>                     elementConfig: {
>                         type: "text",
>                         placeholder: "Street",
>                     },
>                     className: "form-control mb-2",
>                     value: "",
>                     label: "Street",
>                     validation:{
>                         required : true
>                     },
>                     valid:false,
>                     touched :false
>                 },
>                 country: {
>                     elementType: "select",
>                     elementConfig: {
>                         placeholder: "Country",
>                         options:[]
>                     },
>                     className: "form-control mb-2",
>                     label: "Country",
>                     value : "--Choose Country--",
>                     validation:{
>                         required : true
>                     },
>                     valid:false,
>                     touched :false
>     
>                 },
>                 state: {
>                     elementType: "select",
>                     elementConfig: {
>                         placeholder: "State",
>                         options:[]                    
>                     },
>                     className: "form-control mb-2",
>                     label: "State",
>                     value : "--Choose State--",
>                     validation:{
>                         required : true
>                     },
>                     valid:false,
>                     touched :false
>                 },
>                 city: {
>                     elementType: "citySel",
>                     elementConfig: {
>                         placeholder: "City",
>                         options : []
>                     },
>                     className: "form-control mb-2",
>                     label: "City",
>                     value : "--Choose City--",
>                     validation:{
>                         required : true
>                     },
>                     valid:false,
>                     touched :false
>                 },
>                 mobileNumber: {
>                     elementType: "input",
>                     elementConfig: {
>                         type: "number",
>                         placeholder: "Mobile Number",
>                     },
>                     className: "form-control mb-2",
>                     value: "",
>                     label: "Mobile Number",
>                     validation:{
>                         required : true,
>                         absolute : 10,
>                         isNumeric : true
>                     },
>                     valid:false,
>                     touched :false
>     
>                 },
>                 email: {
>                     elementType: "input",
>                     elementConfig: {
>                         type: "email",
>                         placeholder: "Your E-Mail",
>                     },
>                     className: "form-control mb-2",
>                     value: "",
>                     label: "E-Mail Address ",
>                     validation:{
>                         required : true,
>                         isEmail:true
>                     },
>                     valid:false,
>                     touched :false
>                 }
>             },
>             formIsValid: false,
>             editStudentDetailMode : false,
>             id : null
>         }     **//This helps to set the initial data on reset Form Function**
>         **this.baseState  = this.state;**
>     }
>      //To Update the Input Field On Edit Buttob Click From Table    componentDidUpdate(){
>         if(this.state.editStudentDetailMode !== this.props.editStudentDetailMode){
>             const updatedStateEditCondition = {...this.state};
>                 updatedStateEditCondition.editStudentDetailMode = this.props.editStudentDetailMode;
>                 updatedStateEditCondition.id = this.props.editStudentDetailModeObject.id;
>                 this.setState(updatedStateEditCondition);
>             const updateStudentDetail = {...this.state.studentDetail};
>             const editStudentDetail = this.props.editStudentDetailModeObject;
>             for(let key in updateStudentDetail){
>                 for(let property in editStudentDetail){
>                     if(key === property){
>                         updateStudentDetail[key].value = editStudentDetail[property];
>                     }
>                 } 
>             }
>             this.setState({studentDetail:updateStudentDetail});
>         }
>     }    //Reset Function
>     resetForm=()=>{
>         this.setState(this.baseState);
>     }    //Submit Function
>     submitHandler = (event)=>{
>         event.preventDefault();
>         const studentData = {};
>         studentData.id = this.state.id;
>         for(let formIdentifier in this.state.studentDetail){
>             studentData[formIdentifier] = this.state.studentDetail[formIdentifier].value;
>         }
>         this.props.submitForm(this.state.editStudentDetailMode,studentData);
>         this.resetForm();
>     }