如何在提交表单按钮后为组件设置初始状态。
您好，我有一个组件，我在其中动态创建表单 使用状态作为创建和更新的主流 输入表单的值，然后选择表单。
现在这个组件在两个条件下运行 1) 创建模式 2) 编辑模式
和 resetForm 函数，它保存了 prevState 和我曾经用过的 在点击提交按钮之前设置。
所以哪个应该作为流的新状态作为其他的初始状态 价值。
> 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();
> }
enter image description here 2) 编辑模式
编辑模式以相同的状态和逻辑工作，我把每个人的数据 对象表单中的输入字段，我稍后尝试填充该值 在其状态的 state.studentDetail.firstname.value 中，用户可以 根据需要更改和更新值。
点击提交按钮后， 当我按下提交表单按钮时，ResetForm 功能不一样 导致输入元素再次与旧值字段的初始状态。
因此，当我进入创建模式时，我需要在提交按钮后设置我的初始状态。 enter image description here enter image description here
