Nhận các giá trị dạng redux trong sự kiện onChange

Question

Cách chính xác để lấy các giá trị ra khỏi biểu mẫu được quản lý bởi redux-form sau mỗi lần cập nhật biểu mẫu là gì? Tôi cần phải gửi một hành động mỗi khi biểu mẫu thay đổi, sử dụng các giá trị được nhập vào biểu mẫu.

Giải pháp hiện tại của tôi lấy giá trị cũ, thay vì giá trị cũ đã được cập nhật.

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

giải pháp khác của tôi là thế này, nhưng tôi không biết làm thế nào đáng tin cậy đó là:

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

Answer 1

Với Redux dạng 6, bạn có thể nhận được các giá trị bằng cách sử dụng formValueSelector:

import { formValueSelector } from 'redux-form'; 

const selector = formValueSelector('myFormName'); 

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

Bây giờ bạn có thể so sánh các giá trị hiện tại và các giá trị trước đó trong 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 
    } 
} 

Sử dụng hình thức redux tối đa phiên bản 6, bạn không phải sử dụng formValueSelector dưới dạng biểu mẫu redux thêm valuesprop tự động vào biểu mẫu được trang trí của bạn.