以下の内容はhttps://blog.okazuki.jp/entry/2016/01/24/115611より取得しました。


React + TypeScriptでredux-formのformの値を初期化する

redux-formのformになるクラスにinitialValuesというプロパティに値を設定してやると、フォームデータが初期化されるくさい。

注意点としては、redux-formの型定義ファイルにinitialValuesが定義されてないので自分でプロパティをはやしてやる必要があるという点です。

interface FormData {
    lhsField: string;
    rhsField: string;
}

interface IndexPageProps extends ReduxForm.ReduxFormProps {
    lhs?: number;
    rhs?: number;
    answer?: number;
    initialValues?: FormData; // 自分ではやす
    init?: () => void;
}

あとは、reduxForm関数に渡すselect関数でinitialValuesを適当にstateから抜き出してやればOK。

function select(state: rootReducers.AppState): IndexPageProps {
    return {
        lhs: state.calc.lhs,
        rhs: state.calc.rhs,
        answer: state.calc.answer,
        initialValues: {
            lhsField: state.calc.lhs && state.calc.lhs.toString(),
            rhsField: state.calc.rhs && state.calc.rhs.toString()
        }
    };
}

export default ReduxForm.reduxForm({
    form: 'IndexForm',
    fields: ['lhsField', 'rhsField']
}, select, {
    init: calcActions.init
})(IndexPage);

ソース全体

GitHubに上げておきました

github.com




以上の内容はhttps://blog.okazuki.jp/entry/2016/01/24/115611より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14