javascript - Získavanie hodnôt redux-form vo funkcii onChange


Aký je správny spôsob, ako získať hodnoty z formulára spravovaného pomocou redux-form po každej aktualizácii formulára? Potrebujem odoslať akciu vždy, keď sa formulár zmení, s použitím hodnôt zadaných do formulára.

Moje súčasné riešenie vyťahuje staré hodnoty namiesto tých, ktoré boli práve aktualizované.

  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>
    );
  }

Moje druhé riešenie je toto, ale neviem, ako je spoľahlivé:

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

Odpoveď č. 1

S redux-form 6 môžete získať hodnoty pomocou formValueSelector:

import { formValueSelector } from 'redux-form';

const selector = formValueSelector('myFormName');

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

Teraz môžete porovnať aktuálne hodnoty a predchádzajúce hodnoty v componentWillReceiveProps:

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

Pri používaní redux-form až do verzie 6 nemusíte používať formValueSelector, pretože redux-form automaticky pridá do vášho dekorovaného formulára vlastnosť values.