score:4
Accepted answer
I would recommend react-redux to connect your components with redux store, however it is still doable without it:
Create action creators that will update specific variable in the store:
import { bindActionCreators } from "redux";
const updateFirstName = name => ({ type: "CHANGE_FIRSTNAME", payload: name });
const updateLastName = lastName => ({
type: "CHANGE_LASTNAME",
payload: lastName
});
const updateEmail = email => ({ type: "CHANGE_EMAILID", payload: email });
const updateIban = iban => ({ type: "CHANGE_IBAN", payload: iban });
const updateBankName = bankName => ({
type: "CHANGE_BANKNAME",
payload: bankName
});
Now bind your action creators with dispatch, so calling actionCreators.updateFirsName('something')
will actually dispatch an action to the store.
export const actionCreators = bindActionCreators(
{
updateFirstName,
updateLastName,
updateEmail,
updateIban,
updateBankName
},
store.dispatch
);
Now you only need to call each store-updating function whenever theres an change on the input:
import React, { Component } from "react";
import "./form.css";
import { actionCreators } from "/path/to/store";
class Form extends Component {
render() {
return (
<div>
<div id="center">
<form>
<div className="form-group">
<label for="firstname">First Name:</label>
<input
type="firstname"
className="form-control"
id="firstname"
onChange={e => actionCreators.updateFirstName(e.target.value)}
/>
</div>
<div className="form-group">
<label for="lastname">Last Name:</label>
<input
type="lastname"
className="form-control"
id="lastname"
onChange={e => actionCreators.updateLastName(e.target.value)}
/>
</div>
<div className="form-group">
<label for="email">Email address:</label>
<input
type="email"
className="form-control"
id="email"
onChange={e => actionCreators.updateEmail(e.target.value)}
/>
</div>
<div className="form-group">
<label for="bankacc">IBAN:</label>
<div id="deletebank" className="items">
<input
type="bankacc"
className="form-control"
id="bankacc"
onChange={e => actionCreators.updateIban(e.target.value)}
/>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash" />
</button>
</div>
</div>
<div className="form-group">
<label for="bankname">Bank Name:</label>
<input
type="bankname"
className="form-control"
id="bankname"
onChange={e => actionCreators.updateBankName(e.target.value)}
/>
</div>
<div className="form-group">
<button type="button" className="btn addbank">
+ Add bank account
</button>
</div>
<div className="form-group">
<button type="button" class="btn btn-success">
Submit
</button>
</div>
</form>
</div>
</div>
);
}
}
export default Form;
Source: stackoverflow.com
Related Query
- 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 can i get values from multiple input boxes on form submit and store the values as an object in an state array for React?
- I want to use useEffect once i submit a form and take the value from input field and assign it to a api url and get response
- How can I take a value from an input tag in a TSX component, and use that value in a Node JS file in a different directory?
- How to store, submit and copy input from form to another component in ReactJS
- How to set value of an input from Redux store, but then still be able to write in that input and update value?
- How do I store current value from input fields and add new ones?
- How can I take the value of an Input and store it in another component?
- React Native: HeadslessJS and Redux - How to access store from task
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?
- How to connect simple Formik form with Redux store and dispatch an action?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to use useEffect hook properly with array dependency. I passed state from redux store and still my component renders infinitely
- How to give default value and placeholder to redux form select field?
- How to handle multiple api request,to show loading indicator from one variable in redux store
- How to retrieve data from Redux store using functional components and avoiding useSelector & useDispatch
- How can I take a input from user and change it with setState?
- How to take the input from a react component and pass the length of the input to another react component
- Take input value from input and add to state
- Redux Form 7.4.2 , How to prevent form submit on component render and showing errors
- How to use handleSubmit to submit data in form and some extra data in redux form?
- Populate value in input field directly from redux store
- How can I get more than one value from the Redux store in a single statement?
- How to pass input value on form submit in react
- How to consecutively add values from one array to another and store the value in a new array in javascript?
- how to store textarea new line value into array with react and send it to node js variable with post request
- How to check and return value of state object array and use that to identify which object to take data from
- Async props pass in React: How to pass a key to update redux store in react? [First from the higher component and then from redux store]
More Query from same tag
- Get the data from an object
- How to import downloadjs into react js file?
- React-Redux TypeError: Cannot read property 'setStatus' of undefined
- Handle login with JWT auth in reactjs
- All child elements inheriting onclick event from parent div on React
- Is there a way to store a file in a React state?
- Manipulate one component instance from few places ReactJS
- The element onClick handler conflicts with form onSubmit of sibling element
- Render of array elements in React
- I can't get this code to work for my project?
- React + TypeScript - how to update state with single object with a "dynamic" set of changes
- React how to set component id to be able to use document.getElementById()
- How can I create a search with multiple, optional, parameters using JavaScript?
- React - How can I reverse the order of dynamic children lists that have a key unique id
- Gatsby only passing on checkbox value to Netlify forms
- How to Initialise leaf/child stores of MobX State Tree
- Send a message from Server side to React front (NodeJS)
- How to get a particular attribute from an array of array objects?
- How to auto install npm modules when I build ASP.NET Core project
- React-router not matching on valid route
- How to send user uploaded images using formData and Fetch
- React JS refresh page every time clicking on menu item using route
- How to give the rest of letters default color
- React onClick function triggering itself at mount
- My css classes in react are afecting diferent pages
- React: access component function from another component
- Issues setting date
- React with jquery does not work
- Render Props vs HOC?
- How can I wait for an event to happen before asserting a test in jest?