javascript - Obter valores do redux-form no evento onChange
Qual é a forma correta de obter os valores de um formulário gerido pelo redux-form após cada atualização do formulário? Preciso de despachar uma ação sempre que o formulário mudar, usando os valores introduzidos no formulário.
A minha solução atual obtém os valores antigos, em vez daqueles que acabaram de ser atualizados.
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>
);
}
A minha outra solução é esta, mas não sei quão fiável ela é:
onFormChange(e) {
console.log(e);
setTimeout(() => {
const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
}, 0);
}
Resposta #1
Com o redux-form 6, você pode obter os valores usando o formValueSelector:
import { formValueSelector } from 'redux-form';
const selector = formValueSelector('myFormName');
connect(
state => ({
values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3');
})
)(MyFormComponent);
Agora pode comparar os valores atuais e os valores anteriores em 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
}
}
Usando redux-form até à versão 6, não precisa de usar o formValueSelector pois o redux-form adiciona automaticamente a prop values ao seu formulário decorado.
