score:44
to post the formdata
using axios
, you need specify in header
that you are sending formdata
, for that content-type
should be multipart/form-data
.
check this, how to use formdata
with axios
:
let formdata = new formdata(); //formdata object
formdata.append('name', 'abc'); //append the values with key, value pair
formdata.append('age', 20);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
axios.post(url, formdata, config)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
score:0
you can update your changes to your state dynamically. see the example here
constructor(props) {
super(props);
this.state = {value: ''};
this.handlechange = this.handlechange.bind(this);
this.handlesubmit = this.handlesubmit.bind(this);
}
bind all your fields to your state. exampkle
this.sate = { name: '', username: '', select: '' }
and then
_renderelement: function(group){
switch(group.type){
case 'text':
return <input classname={group.cssclassname}
id={group.label}
placeholder={group.placeholder}
value={this.state[group.name]}
onchange={this.handleusernamechange}
required={group.mandatory == 'y'? true: false}/>
case 'dropdown':
return <select classname={group.cssclassname}>
onchange={this.handledropdropdownchange}
<option value="">{group.placeholder} </option>
{group.values.map(el => <option>{el.value}</option>)}
</select>
</div>
}
}
note group.name can be username, name or what ever you name your control.
handleusernamechange(event) {
this.setstate({username: event.target.value});
}
handledropdownchange(event) {
this.setstate({select: event.target.value});
}
and then when posting
axios.post(url, this.state, config)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
don't forget to update your render to
render: function() {
return (
<div classname="container">
<br/>
<div classname="panel panel-primary">
<div classname="panel-heading">form</div>
<div classname="panel-body">
<form onsubmit={this.handlesubmit}>
<div classname="form-group">
<div classname="col-xs-5">
{this.renderform()}
<input type="submit" value="submit" />
</div>
</div>
</form>
</div>
</div>
</div>
)}
});
have a look at the doc here https://facebook.github.io/react/docs/forms.html
score:0
using fetch
function uploadfile(file) {
fetch('https://path/to/api', {
// content-type header should not be specified!
method: 'post',
body: file,
})
.then(response => response.json())
.then(success => {
// do something with the successful response
})
.catch(error => console.log(error)
);
}
score:17
you can access formdata like this:
handlesubmit(event) {
// prevent default behavior
event.preventdefault();
const data = new formdata(event.target);
// access formdata fields with `data.get(fieldname)`
// for example, converting to upper case
data.set('username', data.get('username').touppercase());
// do your axios stuff here
}
this is the code for the form:
render() {
return (
<form onsubmit={this.handlesubmit}>
<label htmlfor="username">enter username</label>
<input id="username" name="username" type="text" />
<button>send data!</button>
</form>
);
Source: stackoverflow.com
Related Query
- How to pass form values as FormData in reactjs on submit function
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- How can i pass data from ReactJS submit form to AdonisJS
- How to submit the form by Material UI Dialog using ReactJS
- How to pass a function as an argument to a ReactJS component in TypeScript
- How to pass values from a component into Formik multi-step form wizard?
- How to pass values from on component to Redux form
- How to pass in a second argument on ReactJS onSubmit function call
- Reactjs - How to pass values from child component to grand-parent component?
- How to disable form submit button until all input fields are filled?! ReactJS ES2015
- How to test function and inner statement after form submit handler in jest/enzyme react
- How to pass Props() value into setState() to make modal form editable using ReactJs
- How to pass form variable in submit? ReactJS
- ReactJS V16 How to pass parent function to grandchild event handler
- How to pass form values from child component to parent in react
- How to pass event and other arguments inside an arrow function in ReactJs
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to pass a ReactJS function as a callback to a external JS function?
- React + Formik - how to pass in new values and set form as dirty?
- Need Reactjs help on how to properly pass this function from the parent to child button component
- How to trigger a function when trying to submit a form using vazco/uniforms?
- Reactjs How to right pass arguments to function in props
- How can I reset form after submit in reactjs hooks
- How can I get the form values on the submit event of a Redux-Form?
- How to pass the values to point json object in ReactJs
- How to redirect and pass data as props on form submit in React?
- React Final Form How to pass form values in a modal button?
- How to pass an argument to a function in my backend using .fetch()? ReactJS + Node
- How to pass input value on form submit in react
- How to pass URL params to render function in ReactJS
More Query from same tag
- Lifecycle issue on axios call to an external API
- changing React.js form values from a chrome extension
- React state needed for simple modal form?
- Notification send to user in nodeJS
- Safari reporting "Unexpected token 'const' " when I open my React App
- React useEffect doesn't reload my component after state update
- How to create a simple react app in one file?
- Preloading with React.lazy
- Change Set State in Component Life Cycle React Js
- React project in Visual Studio 2017
- TypeError: Cannot read property 'map' of undefined,, trying to read from mongodb
- React Konva, blueimp-load-image uploaded Image rescaling
- Passing a value from a child component to another one (same level) without waiting for parent status update
- Passing click function from One component to other component
- React: Animate ternary output components
- @for loops in styled-components
- IPFS issue: can't upload files with ipfs.add(file)
- AsyncSelect does not change loading message nor no option message (react-select library)
- No route registered for static file in Azure App Service
- React Function loading initial value for Radio Group and selecting it
- Calling server side method from client returns undefined
- What am I missing with my ul className function call
- Next.js next-i18next is always routing to EN
- Create React App - console lint warnings don't match eslintrc
- I wanted to show the title on the drop down menu and when some one select an option and submit i wanted the year value should be submitted
- React Builds- Which files go on the server? Why isn't my project deploying?
- Cycle Through List Items Mapped From a State (javascript)
- I want to add a textbox to my React app, how would I go about this?
- React page doesn't load the new content
- Does convertFromHTML support custom block types in Draft.js?