score:1
Accepted answer
i talked to the creator of the vazco/uniforms, radosław miernik, and he said that there are two ways of solving it:
1) adding a button on the form, when it is clicked, triggers the function.
2) create a custom form to make it.
as i was looking for a solution to use only autoform, i noticed it was not possible. my solution was then to create a custom form with what i needed. so the solution is a custom form (based on autoform):
import clonedeep from 'lodash.clonedeep';
import isequal from 'lodash.isequal';
import set from 'lodash.set';
import {proptypes} from 'react';
import validatedquickform from 'uniforms-bootstrap3/validatedquickform';
const auto = parent => class custom extends parent {
static auto = auto;
static displayname = `auto${parent.displayname}`;
static proptypes = {
...parent.proptypes,
onchangemodel: proptypes.func
};
constructor() {
super(...arguments);// eslint-disable-line
this.state = {
...this.state,
model: this.props.model,
modelsync: this.props.model
};
}
componentwillreceiveprops({model}) {
super.componentwillreceiveprops(...arguments);// eslint-disable-line
if (!isequal(this.props.model, model)) {
this.setstate({model, modelsync: model});
}
}
func() {
// makes whatever i need
}
getnativeformprops() {
const {
onchangemodel, // eslint-disable-line no-unused-vars
...props
} = super.getnativeformprops();
return props;
}
getmodel(mode) {
return mode === 'form' ? this.state.modelsync : this.state.model;
}
onchange(key, value) {
this.setstate(state => ({modelsync: set(clonedeep(state.modelsync), key, value)}), () => {
super.onchange(...arguments);// eslint-disable-line
this.setstate({model: this.state.modelsync}, () => {
if (this.props.onchangemodel) {
this.props.onchangemodel(this.state.model);
}
});
});
}
onreset() {
this.setstate(() => {
super.onreset();
return {
model: this.props.model,
modelsync: this.props.model
};
});
}
onsubmit(event) {
if (event) {
event.preventdefault();
event.stoppropagation();
}
this.func(); // func that i wanted to call
return new promise(resolve =>
this.setstate({validate: true}, () =>
resolve(this.onvalidate().then(
() => super.onsubmit()))
)
);
}
onvalidate() {
return this.onvalidatemodel(this.getchildcontextmodel());
}
};
export default auto(validatedquickform);
Source: stackoverflow.com
Related Query
- How to trigger a function when trying to submit a form using vazco/uniforms?
- How to test a function has been called when submitted within a form using react-testing-library?
- How to trigger a function when cursor stops moving for 3 seconds using react hooks?
- How to trigger popup notification on submit of a form in React using React Router navigate hook?
- How to call API and stores results in a state when a form submit is clicked using react hooks
- How to trigger a function at regular intervals of time using hooks and when certain criteria is met I want to clear the time interval?
- How can I add my Axio post on submit of my upload form when I am using a custom hook for form validation?
- How can I trigger a function only when only child divs are clicked using event bubble?
- How to Reset a form When I click submit Button I React using React hooks
- how can I get the csv file object when using this code? I'm trying to add a function to convert a csv file to a json file
- How to submit a form using Enter key in react.js?
- How to submit the form by Material UI Dialog using ReactJS
- How to submit form component in modal dialogue using antd react component library
- How to pass form values as FormData in reactjs on submit function
- ReactJS: how to trigger form submit event from another event
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- When using ES6, how can an imported function be undefined in one file, and not in another?
- How do you pass data when using the navigate function in react router v6
- How to set focus on a TextField\input using a Formik form when initialValues are passed through\bound to props.object?
- How to load React-select Async with initial options for edit item function when using a search API?
- React - Trigger form submit using useRef
- How to set a defaultChecked to only first input in radio button when using map function in reactjs
- How to test function and inner statement after form submit handler in jest/enzyme react
- How to pass Dispatch to action when using redux form
- How to trigger a form submit in child component with Redux?
- How to call react logger function when using CDN
- How to correctly mock function in Jest tests when using Rollup.js
- How to set a ref when using React.cloneElement on a Function component?
- Using React, how to trigger browser loading indicator in browser tab when changing routes?
- How to type the getStaticProps function when using getStaticPaths params?
More Query from same tag
- React Router v6 changes URL but doesn't render
- How to get these component buttons to render inside the correct card componet?
- Clear Interval on hover React
- React this.setState not updating my value, on firebase changes are showing
- Typescript error type not assign able to state - usestate
- set every element value to false except one value in javascript object
- onChange antd Input component doesn't setState (hook) properly with list from axios get in React
- React: How to call multiple state-changing functions, in one procedure?
- How to add onclick event for info boxes into pushpins on bingmaps in reactjs
- Unit testing React component that includes MathJax
- Ternary Operator in ReactJs Card Header
- react, typescript - a type for both stateless and normal components
- How to clear the input field (remove the search term) after the search?
- Data from the backend is not appearing when you assign it into new object on the front end
- toggling boolean value in stateful component
- Extract fetched data using map method
- Why Mongoose adds my post object to the user's collection?
- Array not re-rendering even after this.setState
- reset value when using react-select
- How can I replace simple text with a validated URL?
- Can someone explain this to me from event loop perspective?
- Why doesnt the align-self: flex-end css property doesnt work on flex div?
- How to add class name dynamically in react JS on selected tab
- Redux ReactJS : How Components have access to the store?
- How to use rainyday.js in a React.js project?
- How to map and filter JSON with Javascript
- how to use images in reactjs
- Error on using exports in a React application - Uncaught ReferenceError: exports is not defined
- Create React App , All the test cases are failing because of 1 error
- How to use react-admin's ChipField if there is no field/column name?