جافاسكريبت - الحصول على قيم redux-form في حدث onChange

ما هي الطريقة الصحيحة للحصول على القيم من نموذج يتم إدارته بواسطة 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);
  }

الإجابة رقم 1

مع redux-form 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(nextValues).some((key) => nextValues[key] !== values[key])) {
        console.log(nextProps.values); // do something with values
    }
}

باستخدام redux-form حتى الإصدار 6، لا تحتاج إلى استخدام formValueSelector حيث يضيف redux-form الخاصية values تلقائيًا إلى النموذج المزخرف الخاص بك.