Comments (6)
So your "field" (property on an object in your store) is an Array of strings (or objects of each job has more than one field). You'd have to have some sort of component that called handleChange('jobs')(modifiedArray)
. Keeping each of those inputs in redux might be tough, but perhaps the component that did the addition could also use reduxForm('newJobForm')
or the like. Does that help?
from redux-form.
perhaps the component that did the addition could also use reduxForm('newJobForm')
In this case, the newly added newJobForm will use the same sliceName newJobForm
as the existing one does. Does this mean that the two job forms would reflect the same data within this.state.newJobForm
?
from redux-form.
All right, wrote a higher level component to make it work:
/**
*
* This Component is to handle Nested inputs
*
**/
"use strict";
import BaseComponent from'BaseComponent';
import React from 'react/addons';
import cx from 'classnames';
import _ from 'lodash';
export default class NestedInput extends BaseComponent {
static propTypes = {
customClasses: React.PropTypes.string,
onChangeHandler: React.PropTypes.func.isRequired,
optionsType: React.PropTypes.string.isRequired,
data: React.PropTypes.array,
label: React.PropTypes.string,
parseFn: React.PropTypes.func
}
constructor(){
super();
this._bind('_onChangeHandler');
}
render() {
const {customClasses, onChangeHandler, optionsType, data, label} = this.props;
let classnames = cx('NestedInput', customClasses);
let _this = this;
let _data = data ? data : [];
return (
<div className={classnames}>
<label className="label-control">{label}</label>
{React.Children.map(this.props.children, function(child, index) {
return React.cloneElement(child, {
data: _data[index] || {},
handleChange: _this._onChangeHandler(index),
handleBlur: _this._onChangeHandler(index)
});
})}
</div>
);
}
_onChangeHandler(index) {
return (field) => (e) => {
const {data, onChangeHandler} = this.props;
let _data = data ? data : [];
let _index = index;
let _newData = {};
_newData[field] = e.target.value;
_data[_index] = _.assign({}, _data[_index], _newData) ;
onChangeHandler(_data)();
};
}
};
And while using it:
<NestedInput
customClasses="formUserInfoJob"
onChangeHandler={(value) => handleChange('formUserInfoJob', value)} data={formUserInfoJob}>
<Job />
<Job />
</NestedInput>
Also I override the default handleChange
to not only take the e.target.value
but also a direct value
input.
from redux-form.
So this issue is resolved?
from redux-form.
sure, resolved
from redux-form.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from redux-form.
Related Issues (20)
- meat.error
- Redux Form 8.3.6 - Huge form Sluggish HOT 1
- Form submission canceled because the form is not connected.
- syncError is not recognizing unrecognized Fields
- Malicious code on api documentation site HOT 5
- Inline validate causing infinite loop (Maximum update depth exceeded)
- redux-form/examples HOT 4
- Using connect from react-redux with reduxForm HOC throws an error
- Radio field never gets touched with MUI - cannot validate
- how to select form value and put condition accordingly field array in redux form
- error UNSAFE_componentWillReceiveProps and UNSAFE_componentWillMount
- [Bug] : Redirect to Github link is broken
- Support React 18 HOT 9
- Multiple button needs reference in fieldArray onClick={() => fields.push({})}
- Scrollbar jumps on wizard example
- Support react-redux 8.x.x HOT 4
- validate does not trigger with new initialValues HOT 9
- Component mounts twice after going to different page from redux form
- Text characters are getting deleted in TextArea on iOS
- Security Vulnerability with Lodash version 4.17.15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-form.