onChangeイベントのredux-form値の取得

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

私の他の解決策はこれですが、私はそれがどのように信頼性の高い分からない：Reduxのフォーム6で

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

Answer 1

、あなたが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をredux-formとして使用する必要はありません。valuespropを自動的に装飾されたフォームに追加します。