score:2
first of all, you have access to the props of the component everywhere on the component using "this.props.propname". you just have to remember that if you are using "this" keyword inside a component method you have to bind it (on constructor or whatever) or use an arrow function instead of class method.
you also have access to the form fields when using onsubmit through the form itself passed with the event object, you can use event.target.elements to get an array of the form controls (inputs, button, selects, etc.)
and lastly, if you want to submit the form, you can use the submit() method inside your handlesubmit with again the form you get from the event like so: event.target.submit(). but i can see you are using the fetch api, so it is like you are already submitting the form like that. you can try to set the url on the form tag as the action attribute and submit the form with the submit() if it passes your validation.
more info on the submit() method on w3schools
more info on accessing form.elements on w3schools
binding functions to components - to use "this" keyword inside them
for example:
<form id="additem" method="post" action={`/api/additem/${this.props.matchid}`} onsubmit={this.handlesubmit}>
<form.group>
<form.row>
<col xs={6}>
.
.
.
</form.group>
<form.control type="submit" id="additemsubmit" name="add" value="submit" />
handlesubmit = (e) => {
e.preventdefault();
// your validation logic here
// you can use e.target.elements to access the array of the form controls
if (isvalid) {
e.target.submit(); //submitting the form to the link in action
} else {
console.log('errors on form');
}
}
on the other hand, as others already commented on your question, you can make your component as controlled component, which basically means that each form control will have a value on your state and you will have access to all the fields values in state.
Source: stackoverflow.com
Related Query
- How to submit a form through onSubmit event handler
- React.js: submit form programmatically does not trigger onSubmit event
- ReactJS: how to trigger form submit event from another event
- How to test function and inner statement after form submit handler in jest/enzyme react
- React how to pass onSubmit handler through props to the components
- How can I get the form values on the submit event of a Redux-Form?
- How to submit a form on input field onBlur event in ReactJS?
- Trying to return jsx from an event handler onSubmit of the form
- In React how does one pass an event handler as a prop while mapping through an array?
- onSubmit event handler not working in Reactjs form
- how to submit a formik form through mutation with ApolloClient?
- Redux - How to get form values in its submit handler and call event.preventDefault()?
- rjsf with typescript, how can I access formData and event in the onSubmit handler
- How to submit a form using Enter key in react.js?
- React formik form validation: How to initially have submit button disabled
- How to submit form from a button outside that component in React?
- How to submit the form by Material UI Dialog using ReactJS
- How to submit form component in modal dialogue using antd react component library
- React Form Component onSubmit Handler Not Working
- How to set event handler in React sub-component
- How to unit test a react event handler that contains history.push using Jest and Enzyme?
- How to pass an event handler to a child component in React
- How to pass form values as FormData in reactjs on submit function
- React form with multiple buttons - how to choose one to handle onSubmit event?
- React Ref Form onSubmit Handler not triggered
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- How to Pass Event Up Through Multiple Child Components?
- Next.js, how to submit a form to another page?
- How to dynamically update the value for any input field with one event handler function, using hooks
- How to add arguments to event handler in ES6 React when functions are bound in constructor
More Query from same tag
- React: How to Animate Expanding and Collapsing Div When the Size of the Content is Not Knowable
- close datepicker menu using button-reactjs
- React JS setState(...): Can only update a mounted or mounting component
- Warning: Prop `id` did not match in tradingview widget
- React native component wont update when remote debug
- Should every async call response be stored in the redux store?
- Mapbox-GL-JS + REACT: linking radio button to switch the layers of the map
- Get info from API request with parameters ReactJS
- MATERIAL-UI React - Popper of another Popper
- How can I make each student add their own identifier tags?
- TypeError: __webpack_require__.i(...) is not a function
- How to set sessionStorage dynamically from Object mapping in react
- React stopPropagation onClick for disabled button with nested elements
- Trigger tooltip manually in React-Bootstrap
- Try to map through an enum in TS with Object.entries<T>(Enum).map(), but only works with string based enums?
- I am using sass file in react component but compiler give some errors
- Login with Firebase/auth - firebase__WEBPACK_IMPORTED_MODULE_3 __
- Load more data from API when user scrolls the the page. REACT
- Cannot get basic React with JSX example to work
- Why is there a vertical gap between adjacent divs when selecting text?
- react wildcard in using setState
- Redux display error messages from Nodejs backend
- React - Passing focus functions to child components using refs
- React.js: How to get all props component expects?
- Update App state based on Child component
- I think this is another React/JS context issue, how do I extract this variable?
- Mongoose populate method only storing one Object
- React img shows [object Module] instead of the image
- Using npm package in Meteor via cosmos:browserify
- React preloading components with Lazy + Suspense