score:14
just decorate another component with same form name and you have access to same state variables there. also you can pass it onsubmit function from parent and be able to submit all the field values from wherever you define them as they are all from redux state, not html of current form instance. (it is kind of "hacky" way, but it feels right)
the submit function is defined from parent, not shared in state, so you can have it different for every instance.
class mysubmitform extends react.component {
render() {
return (
<button
onclick={this.props.handlesubmit}
>
{this.props.pristine ? 'pristine' : 'changed'}
</button>
)
}
}
export default reduxform({
form: 'myformname'
})(mysubmitform);
score:0
i had to tackle this issue recently. i ended up passing a callback to the form, which is invoked every time the properties i'm interested in change.
i use the componentdidupdate
life cycle method to detect changes.
this should work on any version of the library.
here is a post with sample code - http://nikgrozev.com/2018/06/08/redux-form-with-external-submit-button/
score:1
if we are talking about just submitting the form, then you should provide {withref: true} option to your redux connect() function.
consider row component that has child rowdetail component which has information that should be saved from row.
rowdetail in this case could be created like this:
import { connect } from 'react-redux';
import { reduxform } from 'redux-form';
const rowdetailform = reduxform({form: 'row-detail-form'})(rowdetail);
export default connect(mapstatetoprops, null, null, {withref: true})(rowdetailform);
then, in your parent component (row) you create your form with ref attribute:
<rowdetailform ref={'rowdetailform'} .../>
submitting now is 'easy':
onsave() {
this.refs.rowdetailform.getwrappedinstance().submit();
}
if we are talking about pristine and other form properties, then you could try to get them from your mapstatetoprops function in your parent component.
const rowdetailformname = 'row-detail-form';
const mapstatetoprops = (state) => ({
rowdetailform: state.form[rowdetailformname]
});
but this way seems a bit hacky because as i understand redux-form api all form states were never meant to be accessed directly. please correct me if i am wrong
score:2
maybe you can have a look at the instance api of redux-forms
. it provides access to a submit()
method on an instance of your decorated form component. there is also a pristine
boolean property and an invalid
boolean property available (there is a request to expose the submitting property too).
there is an example here : http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (example is for 5.3.1, but the process is similar with v6 using the instance api)
the basic idea is that by adding a ref="myexampleform"
to your form, you can pass it around with this.refs.myexampleform
. you can then check properties of the instance or call the submit()
method (or any other method exposed).
score:2
now is easier to do this. you can call the submit action in the standalone component that has the button.
see this example: https://redux-form.com/7.1.2/examples/remotesubmit/
score:3
in latest redux-form version 6.0.2:
it is possible to access form state
pristine
,submitting
,invalid
via selectors http://redux-form.com/6.0.2/docs/api/selectors.md/it is possible to export redux-form action creators http://redux-form.com/6.0.2/docs/api/actioncreators.md/
score:4
redux-form works with react redux to enable an html form in react to use redux to store all of its state.
if "outside of redux-form" means still redux application, you can try to store those properties in state by dispatching some actions.
in forms: you're detecting whats happening (when its invalid etc), dispatch an action to modify a state, in "outside" part: you're passing a proper property to component (with those you need) and depends on that you disable a button.
Source: stackoverflow.com
Related Query
- Submit button from outside Redux Form v6.0.0
- How to submit form from a button outside that component in React?
- How to take input value from submit form and store in redux store variable?
- Take input value from submit form and store in redux store to use later
- How to disable a submit button in redux form for the second time after the form is submitted for the first time?
- How to get id of a button in a form with two buttons both from type submit
- Submit Redux Form from the Parent Component - Remote Submit
- How to prevent the submit button from reloading the page, while keeping default form warnings?
- How to disable Submit button outside the Antd Form when the fields are invalid?
- e.preventDefault not working when I trigger it from Submit button but working when triggered from onSubmit attribute in Form tag in React
- Trigger Form Submit from Child with Parent button React
- React formik form validation: How to initially have submit button disabled
- Is it possible to trigger a Redux action from outside a component?
- Submit Form using Button in Parent Component in React
- Submit form in ReactJS using BUTTON element
- ReactJS: how to trigger form submit event from another event
- How to pass values from on component to Redux form
- React antd form disable submit button
- React Bootstrap get value from form on submit
- How to disable form submit button until all input fields are filled?! ReactJS ES2015
- Formik React with 2 buttons (Submit and Save) to submit form - Save button not to trigger validation
- Only render a react component when I on submit from a form
- Reset a React Native Formik form from outside the form
- Redux Form Disable Enter button on field Array
- Redux Form always validates even on a normal button press
- pass data from multiple checkbox to api only when a submit button is clicked :react js
- Access react-final-form values from outside the form
- How to create a submit button in react-admin which changes appearance and behaviour depending on form data and validation
- Update both state and props in react-redux form on same Submit button click
- "this" is undefined for a form after submit but not for button in react
More Query from same tag
- Using higher-order components in TypeScript to omit React property on usage
- how to resize indicatiors in react-materialize carousel?
- How to use react component in setting popup for leaflet
- CORS error when posting request in React app to PHP file in Apache server on localhost
- how to set new value in datePicker from ant-design?
- how to populate options for a react select by fetching values from an api to be visible when you click on the select box?
- React JS scrollIntoView() not scrolling all the way down
- React - Store updated but didnt re-render the Component
- React display percentage next to the number input or vice versa
- How to remove nested object by Id from Formik?
- Meteor / ReactJS - UI blinking issue: rendering twice before and after checking a database
- GraphQL Authentication with React and Apollo
- How to convert this create store with thunk to a promise based?
- how to create a space between list items in React material
- storing uploaded images in react state with file reader
- Hey everyone! I want to keep my validation simple and still use a different conditions to every input in my function
- react no-shadow rule handling
- useNavigate hook with multiple choices?
- Implementing React Router
- React and Flask with Socket.IO - CORS problem
- ReactJS: Display value in Alert
- passport.changePassword is not a function - passort-local-mongoose
- Call Function(that render component) in async Function
- Calculate the difference between two dates in javascript using react
- Displaying a modal once per day in a mobile app using session storage
- Svg defs encapsulation
- How to route to next page after successful payment in MERN app?
- How can i test downloading excel file with jest?
- React rendering problem in input box after fetching data in useEffect(). the state changed but textbox value not changing
- react.js ant design range filter with start and end dates error