2017-12-10 4 views
1

Ich erstelle ein Formular mit der React- und Redux-Form. Ich verwende die formValueSelector, um mehrere Eingabefelder zu verbinden. Wenn ich diese Eingabefelder in der Benutzeroberfläche aktualisieren, wird das Formular jedoch nicht erneut gerendert. Mein Code sieht wie folgt aus:Formular wird nicht aktualisiert, wenn der verbundene Wert aktualisiert wird (Redux-Formular)

// HelpForm.jsx 

import React from 'react'; 
import { connect } from 'react-redux'; 
import { reduxForm, formValueSelector } from 'redux-form'; 

import CategorySelectBlock from 'apps/help_form/components/CategorySelectBlock'; 

const selector = formValueSelector('help_form'); 

const mapStateToProps = state => ({ 
    category: selector(state, 'category'), 
    subcategory: selector(state, 'subcategory') 
}); 

class HelpForm extends React.Component { 
    render() { 
     const { 
      category, 
      subcategory 
     } = this.props; 

     console.log('Rendering HelpForm'); 
     console.log('category:', category); 
     console.log('subcategory:', subcategory); 

     return (
      <form id="helpform"> 
       <CategorySelectBlock 
        category={category} 
        subcategory={subcategory} 
       /> 
      </form> 
     ); 
    } 
} 

const ReduxHelpForm = reduxForm({ 
    form: 'help_form' 
})(HelpForm); 

export default connect(
    mapStateToProps 
)(ReduxHelpForm); 

ich von meinen Konsolenprotokollen sehen kann, dass diese HelpForm Komponente nur einmal machen wird, auch nachdem ich einen neuen Wert für die category oder subcategory Felder auswählen (diese innerhalb der CategorySelectBlock Komponente definiert sind).

Mache ich etwas falsch oder missverstanden wie funktioniert formValueSelector? Jede Anleitung würde sehr geschätzt werden. Vielen Dank!

Antwort

0

Ich fand es heraus. Ich habe die Eigenschaft onChange nicht über meinen benutzerdefinierten Eingabetyp übergeben.

Verwandte Themen