используя подсказку о реакции-роутере в componentWillUnmount - PullRequest
0 голосов
/ 18 декабря 2018

У меня есть родительский компонент, который отображает пользовательскую форму, я использую избыточную форму в пользовательской форме, и я пытаюсь сделать это, когда дочерний компонент отключается, если в форме есть какие-либо значения, которые мне нужны для созданиязапрос пользователю, хотите ли вы сохранить его или нет.

Итак, ниже приведен код, запрос не происходит, я использую состояние и обновляю состояние, используя грязный (this.props) из избыточной формы.

, поэтому после componentWillUnmount рендеринг не происходит.Чего мне не хватает, я думаю, что после componentWillUnmount рендеринг не произойдет.

Пожалуйста, смотрите код ниже.

  **//APP.js**


import React from 'react';

class App extends Component{
  state ={
   data = []// array of data
  }

 render(){
  return(
   <div>
    <CustomForm 
     data={this.state.data}
    />
   </div>
 )
 }
}

export default App


**//CustomForm.js**

import React from 'react';
import {connect} from 'react-redux';
import CustomField from './CustomField';
import { Field, reduxForm } from 'redux-form';
import {Prompt} from 'react-router'    
 
class CustomForm extends Component{

 state ={
  formChanged: false
 }
 
 onSubmit = (values) => {
   console.log(values)
 }
 
 componentWillUnmount(){
   if(this.props.dirty){
     this.setState({
      formChanged: true
     })
   }
 }

 render(){
  return(
   <div>
   {
    this.state.formChanged?
     <Prompt 
      when={shouldBlockNavigation}
      message='You have unsaved changes, are you sure you want to leave?'
      />
      :
      null
    }
    <Form  onSubmit={handleSubmit(this.onSubmit)}>
     <Field                                                    
      name="field1"                                            
      type="text"                                              
      component={CustomField}
      label="field1"
     />
    </Form>
   </div>
 )
 }
}

export default reduxForm({
  form: "NewForm",
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: false 
})(connect(mapStateToProps, mapDispatchToProps)(CustomForm))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...