score:9
Just came up against this issue as well. The solution is to use initialValues
as in juliobetta's answer, however the key is to set the value to a variable, such as state.blah
.
You then need to set enableReinitialize
to true
so that the fields get updated when the state changes:
export default connect(state => ({
initialValues: {
accountno: state.accountno,
},
enableReinitialize: true,
}))(Form);
Now, every time you change state.accountno
, the form field will be updated.
score:32
When using redux-form
, you don't need to set the value directly into the field. You can use the method initialize
to populate your form. Or initialValues
as a property of the object passed to redux
to map state to props. The other way is to set the values individually using the function change
from redux-form
. In order to make it to work, you need to wrap your component with connect
from react-redux
. It embeds the dispatch
method in your props.
import React, { Component } from 'react';
import { reduxForm, Field, change } from 'redux-form';
import { connect } from 'react-redux';
class Form extends Component {
componentDidMount() {
this.props.initialize({ accountno: 'some value here' });
// set the value individually
this.props.dispatch(change('myFormName', 'anotherField', 'value'));
}
render() {
return (
<form onSubmit={...}>
...
<Field name="accountno" component={InputText} placeholder="Number" />
<Field name="anotherField" component={InputText} />
</form>
)
}
}
Form = reduxForm({
form: 'myFormName'
})(Form);
export default connect(state => ({
// alternatively, you can set initial values here...
initialValues: {
accountno: 'some value here'
}
}))(Form);
Source: stackoverflow.com
Related Query
- Set value in field in redux form
- How to set visibility to a redux form field on value change?
- How to update specific form field in formik when value changes in redux store?
- Setting an initial value in an text field in redux form
- Dynamically set form field values in React + Redux
- How to set name in redux form field component
- How can you set an enum value from a form field string?
- Firebase - set default value in select field after form submit
- Setting default value for select field in redux form
- React select set initial value with Redux Form
- value is not shown in the field when using redux form
- Redux form field array cannot show the plain text value
- How to perform Firebase storage image upload in a multi field Form to getDownloadURL and set to State for Redux usage
- Getting a field value from Redux form returns 'undefined'
- Redux Form way of changing one Field's value based on another Field without breaking Form Initialisation (based on values)
- How to set the value of form field based on another form field using react, typescript and formik?
- How to set/change Field value from external user action 🏁 React Final Form
- How to reset initial value in redux form
- Set React Input Field Value from JavaScript or JQuery
- Pass custom props to Redux Form Field in TypeScript
- Manually set redux-form field and/or form errors
- redux-form -- Set Value for a field via code?
- Set default value Field Array in Formik
- Field error while using redux form in React js
- How to set initialValue for dynamic form field (ant design)?
- Validate one field based on another Field in redux Form
- Redux Form Field Array Validation
- Modify Redux Form Value and Trigger Onchange
- Redux Form Disable Enter button on field Array
- In Redux Form, how can I set the initial value of the checked property of a checkbox?
More Query from same tag
- Uploading an image with redux-form
- Login with Google custom email only
- 'Setinterval' for slide show function is not working properly in React
- Conditional form output - using react forms
- Why does passing children affect Typescript errors?
- Querying multiple data of a array containing same properties via graphql
- How to access the variables inside a function imported from another page in React?
- I can't change the state of the input tag when click on submit button and when it's empty of fill with text?
- Is there a way to make react context read only?
- Baffling syntax error
- how to solve the error that fs module is not found when used react and next.js
- amp form not submitting form data
- Setting imported material icon as a background in jss
- Child object of variable in state does not display
- Subscribing to a redux action in a react component
- React Native StackNavigator initialRouteName
- How to update React props when web component attributes are updated async?
- How to set path to a component image using style jsx tag in nextjs
- Material UI checkbox complaining to be uncontrolled
- Does React have keep-alive like Vue js?
- How handle Fetch failures in Redux's action creators
- How to handle conditional redirect in react app routes?
- Date validation issue
- Uncheck radio buttons in react
- React Protected Route - React Component Cannot Be Returned Properly
- React useEffect and async fetch
- Functional component renders once, class component renders twice
- RactiveJS and JSX
- How can I setState on two array elements at once?
- How can I update the state of my menu only on the first time my component renders?