Получение значений редукционной формы в событии onChange

Question

Каков правильный способ получения значений из формы, управляемой redux-form после каждого обновления формы? Мне нужно отправлять действие каждый раз, когда форма изменяется, используя значения, введенные в форму.

Мое текущее решение получает старые значения, а не те, которые были только что обновлены.

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

Мое другое решение, но я не знаю, как он надежен:

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

Answer 1

С Redux-формой 6, вы можете получить значение с помощью formValueSelector:

import { formValueSelector } from 'redux-form'; 

const selector = formValueSelector('myFormName'); 

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

Теперь вы можете сравнить текущие значения, и предыдущие значения в componentWillReceiveProps:

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

Используя редукционную форму до версии 6, вы не должны использовать formValueSelector в качестве редукционной формы, которая автоматически добавит valuesprop к вашей оформленной форме.