|
28 | 28 | <body>
|
29 | 29 | <div id="content">
|
30 | 30 | <div class="app___3P8ep hasNav___1KF_W"><div class="nav___11xa5"><button type="button"></button><div class="overlay___1GMox"><i class="fa fa-times"></i> Close</div><div class="placeholder___TzF1K"></div><nav class="menu___12xDU"><a href="https://redux-form.com/8.1.0" class="brand___1qRUu">Redux Form</a><div><div id="codefund" class="benevolent-sponsor template-image-only" style="min-height:211px"></div><script src="https://codefund.app/properties/141/funder.js?template=image-only" async=""></script></div><a href="https://redux-form.com/8.1.0/docs/GettingStarted.md" class="">Getting Started</a><a href="https://redux-form.com/8.1.0/docs/MigrationGuide.md" class=""><code>v6</code> Migration Guide</a><a href="https://redux-form.com/8.1.0/docs/ValueLifecycle.md" class="active___2eU59">Value Lifecycle</a><a href="https://redux-form.com/8.1.0/docs/Flow.md" class="">Flow</a><a href="https://redux-form.com/8.1.0/docs/api" class="">API</a><a href="https://redux-form.com/8.1.0/docs/api/ReduxForm.md" class="indent1___4iVnL"><code>reduxForm()</code></a><a href="https://redux-form.com/8.1.0/docs/api/Props.md" class="indent1___4iVnL"><code>props</code></a><a href="https://redux-form.com/8.1.0/docs/api/Field.md" class="indent1___4iVnL"><code>Field</code></a><a href="https://redux-form.com/8.1.0/docs/api/Fields.md" class="indent1___4iVnL"><code>Fields</code></a><a href="https://redux-form.com/8.1.0/docs/api/FieldArray.md" class="indent1___4iVnL"><code>FieldArray</code></a><a href="https://redux-form.com/8.1.0/docs/api/Form.md" class="indent1___4iVnL"><code>Form</code></a><a href="https://redux-form.com/8.1.0/docs/api/FormName.md" class="indent1___4iVnL"><code>FormName</code></a><a href="https://redux-form.com/8.1.0/docs/api/FormSection.md" class="indent1___4iVnL"><code>FormSection</code></a><a href="https://redux-form.com/8.1.0/docs/api/FormValues.md" class="indent1___4iVnL"><code>formValues()</code></a><a href="https://redux-form.com/8.1.0/docs/api/FormValueSelector.md" class="indent1___4iVnL"><code>formValueSelector()</code></a><a href="https://redux-form.com/8.1.0/docs/api/Reducer.md" class="indent1___4iVnL"><code>reducer</code></a><a href="https://redux-form.com/8.1.0/docs/api/ReducerPlugin.md" class="indent2___2PiOO"><code>reducer.plugin()</code></a><a href="https://redux-form.com/8.1.0/docs/api/SubmissionError.md" class="indent1___4iVnL"><code>SubmissionError</code></a><a href="https://redux-form.com/8.1.0/docs/api/ActionCreators.md" class="indent1___4iVnL">Action Creators</a><a href="https://redux-form.com/8.1.0/docs/api/Selectors.md" class="indent1___4iVnL">Selectors</a><a href="https://redux-form.com/8.1.0/docs/faq" class="">FAQ</a><a href="https://redux-form.com/8.1.0/examples" class="">Examples</a><a href="https://redux-form.com/8.1.0/examples/simple" class="indent1___4iVnL">Simple Form</a><a href="https://redux-form.com/8.1.0/examples/syncValidation" class="indent1___4iVnL">Sync Validation</a><a href="https://redux-form.com/8.1.0/examples/fieldLevelValidation" class="indent1___4iVnL">Field-Level Validation</a><a href="https://redux-form.com/8.1.0/examples/submitValidation" class="indent1___4iVnL">Submit Validation</a><a href="https://redux-form.com/8.1.0/examples/asyncValidation" class="indent1___4iVnL">Async Blur Validation</a><a href="https://redux-form.com/8.1.0/examples/asyncChangeValidation" class="indent1___4iVnL">Async Change Validation</a><a href="https://redux-form.com/8.1.0/examples/initializeFromState" class="indent1___4iVnL">Initializing from State</a><a href="https://redux-form.com/8.1.0/examples/selectingFormValues" class="indent1___4iVnL">Selecting Form Values</a><a href="https://redux-form.com/8.1.0/examples/fieldArrays" class="indent1___4iVnL">Field Arrays</a><a href="https://redux-form.com/8.1.0/examples/remoteSubmit" class="indent1___4iVnL">Remote Submit</a><a href="https://redux-form.com/8.1.0/examples/normalizing" class="indent1___4iVnL">Normalizing</a><a href="https://redux-form.com/8.1.0/examples/immutable" class="indent1___4iVnL">Immutable JS</a><a href="https://redux-form.com/8.1.0/examples/wizard" class="indent1___4iVnL">Wizard Form</a><a href="https://redux-form.com/8.1.0/examples/material-ui" class="indent1___4iVnL">Material UI</a><a href="https://redux-form.com/8.1.0/examples/react-widgets" class="indent1___4iVnL">React Widgets</a><a href="https://redux-form.com/8.1.0/docs/DocumentationVersions.md" class="">Older Versions</a></nav></div><div class="contentAndFooter___kE2nt"><div class="topNav___sBW8S"><a href="https://redux-form.com" class="brand___YAZl-"></a><a class="github___3-vRv" href="https://github.com/erikras/redux-form" title="Github" target="_blank"><i class="fa fa-fw fa-github"></i></a></div><div class="content___3TVHp"><div><ol class="breadcrumbs___1BHo6"><li><a href="https://redux-form.com/8.1.0/">Redux Form</a></li><li>Value Lifecycle</li></ol><div><h1 class="heading___2W8-L" id="understanding-field-value-lifecycle">Understanding Field Value Lifecycle <a href="#understanding-field-value-lifecycle" class="anchor___j3LpN">#</a></h1><p>It's important to understand how your field value is flowing through <code>redux-form</code>.</p>
|
31 |
| -<h2 class="heading___2W8-L" id="value-lifecycle-hooks">Value Lifecycle Hooks <a href="#value-lifecycle-hooks" class="anchor___j3LpN">#</a></h2><p><code>redux-form</code> provides three value lifecycle hooks, provided as props to the <code>Field</code> component. |
| 31 | +<h2 class="heading___2W8-L" id="value-lifecycle-hooks">Value Lifecycle Hooks <a href="#value-lifecycle-hooks" class="anchor___j3LpN">#</a></h2><p><code>redux-form</code> provides three value lifecycle hooks, provided as props to the <code>Field</code> component. |
32 | 32 | <strong>They are all optional.</strong></p>
|
33 | 33 | <h3 class="heading___2W8-L" id="-code-format-value-any-gt-any-code-"><code>format(value:Any) => Any</code> <a href="#-code-format-value-any-gt-any-code-" class="anchor___j3LpN">#</a></h3><blockquote>
|
34 |
| -<p>Formats the value from the Redux store to be used for your input component. Common use cases are |
35 |
| -for maintaining data as <code>Number</code>s or <code>Date</code>s in the store, but formatting them a specific way in |
| 34 | +<p>Formats the value from the Redux store to be used for your input component. Common use cases are |
| 35 | +for maintaining data as <code>Number</code>s or <code>Date</code>s in the store, but formatting them a specific way in |
36 | 36 | your input.</p>
|
37 | 37 | </blockquote>
|
38 | 38 | <h3 class="heading___2W8-L" id="-code-parse-value-any-gt-any-code-"><code>parse(value:Any) => Any</code> <a href="#-code-parse-value-any-gt-any-code-" class="anchor___j3LpN">#</a></h3><blockquote>
|
39 | 39 | <p>Parses the input by the user into the data type that you want to use in the Redux store.
|
40 | 40 | Common use cases are for maintaining data as <code>Number</code>s or <code>Date</code>s in the store.</p>
|
41 | 41 | </blockquote>
|
42 | 42 | <h3 class="heading___2W8-L" id="-code-normalize-value-any-previousvalue-any-allvalues-object-previousallvalues-object-gt-any-code-"><code>normalize(value:Any, previousValue:Any, allValues:Object, previousAllValues:Object) => Any</code> <a href="#-code-normalize-value-any-previousvalue-any-allvalues-object-previousallvalues-object-gt-any-code-" class="anchor___j3LpN">#</a></h3><blockquote>
|
43 |
| -<p>Allows you to add logic based on all your form values to put a constraint on the value of the |
44 |
| -current field. Common use cases include making sure that <code>minDate</code> is before <code>maxDate</code>. If you |
| 43 | +<p>Allows you to add logic based on all your form values to put a constraint on the value of the |
| 44 | +current field. Common use cases include making sure that <code>minDate</code> is before <code>maxDate</code>. If you |
45 | 45 | have provided a parser, the value given to <code>normalize()</code> will already be parsed.</p>
|
46 | 46 | </blockquote>
|
47 | 47 | <h2 class="heading___2W8-L" id="value-lifecycle">Value Lifecycle <a href="#value-lifecycle" class="anchor___j3LpN">#</a></h2><div style="text-align: center;">
|
48 | 48 | <img align="center" src="https://github.com/erikras/redux-form/raw/master/docs/valueLifecycle.png"/>
|
49 | 49 | </div>
|
50 |
| - |
51 | 50 | </div></div></div><div class="footer___1oh0h"><div>Created by Erik Rasmussen</div><div>Got questions? Ask for help:<a class="help___3OayI" href="https://stackoverflow.com/questions/ask?tags=redux-form" title="Stack Overflow" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a><a class="help___3OayI" href="https://github.com/erikras/redux-form/issues/new" title="Github" target="_blank"><i class="fa fa-fw fa-github"></i></a></div><div><a href="https://twitter.com/erikras" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @erikras</a><a href="https://twitter.com/ReduxForm" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @ReduxForm</a></div></div></div></div>
|
52 | 51 | </div>
|
53 | 52 | <script src="https://unpkg.com/react@15.6.1/dist/react.min.js" integrity="sha384-u/3By6KAUETM5AnedAbB9xV0qLxlsRyVBi8mEekTeqD468SBVx2FXEm+1lf85M7c" crossorigin="anonymous"></script>
|
|
0 commit comments