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.
