Ermitteln von redux-form-Werten in onChange-Ereignis

Question

Wie lautet die richtige Methode zum Abrufen der Werte aus einem Formular, das nach jedem Formularupdate von redux-form verwaltet wird? Ich muss jedes Mal, wenn sich das Formular ändert, eine Aktion senden, die die Werte verwendet, die in das Formular eingegeben werden.

Meine aktuelle Lösung erhält die alten Werte, anstatt die, die gerade aktualisiert wurden.

onFormChange(e) { 
    const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields; 
    console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value); 
    } 
    render() { 
    return (
     <form onChange={this.onFormChange}> 
     // inputs here 
     </form> 
    ); 
    } 

Meine andere Lösung ist, aber ich weiß nicht, wie zuverlässig es ist:

onFormChange(e) { 
    console.log(e); 
    setTimeout(() => { 
     const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields; 
     console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value); 
    }, 0); 
    } 

Answer 1

Mit redux-Form 6, können Sie die Werte erhalten mit der formValueSelector:

import { formValueSelector } from 'redux-form'; 

const selector = formValueSelector('myFormName'); 

connect(
    state => ({ 
     values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3'); 
    }) 
)(MyFormComponent); 

Jetzt können Sie die aktuellen Werte und die vorherigen Werte in componentWillReceiveProps vergleichen:

componentWillReceiveProps(nextProps) { 
    const nextValues = nextProps.values; 
    const values = this.props.values; 
    // if at least one of the form values changed 
    if(Object.keys(nextValue).some((key) => nextValues[key] !== values[key])) { 
     console.log(nextProps.values); // do something with values 
    } 
} 

Mit redux-form bis Version 6, müssen Sie nicht die formValueSelector als Redux-Form verwenden fügen Sie die valuesprop automatisch zu Ihrem eingerichteten Form.