[英]Redux-Form v6 Tracking dirty fields
I have a component called 'collapseList' that renders an array of objects using ArrayField. 我有一个名为“ collapseList”的组件,该组件使用ArrayField渲染对象数组。 The data is something like this:
数据是这样的:
[
{ item-name: 'shirt', item-Id: 332 ...},
{ item-name: 'shoes', item-Id: 320 ...}
]
The question is how do I keep track of whether each item in my array is dirty or not? 问题是如何跟踪数组中的每个项目是否脏? For instance in my data, I want to know if only the input fields for the shoes object is dirty.
例如,在我的数据中,我想知道是否只有shoes对象的输入字段是脏的。 I get updated on dirty when an field changes and I can get the index and key of the object changed, but where do I store this?
当字段更改时,我会更新脏内容,并且可以更改对象的索引和键,但是该存储在哪里? I tried to create an object within the component to track it but when I do setState inside say renderField, I get errors saying I can't do that.
我试图在组件内创建一个对象以对其进行跟踪,但是当我在诸如renderField之类的setState中执行操作时,出现错误提示我无法做到这一点。 What do I do?
我该怎么办?
This is a simplified version of the code if anyone is interested and can help me. 如果有人有兴趣并且可以帮助我的话,这是代码的简化版本。
collapseList.js collapseList.js
class collapseList extends Component {
handleSubmitter(values) {
event.preventDefault();
// handle submission
}
renderField({input, label, index, className, disabled, type, meta: {touched, error, dirty, warning}}) {
return(
<div>
<label>{label}</label>
<div className="form-group row">
<div className={className}>
<input className="form-control" {...input} placeholder={label} type={type} disabled={disabled}/>
{touched &&
((error && <span>{error}</span>) ||
(warning && <span>{warning}</span>))}
</div>
</div>
</div>
)
}
renderList({ fields, meta: { dirty } }){
return(
<div>
{fields.map((item, index, field) => {
return (
<div>
<Field
name={`${item}['item-name']`}
component={this.renderField}
label="Item-Name"
/>
<Field
name={`${item}['item-Id']`}
component={this.renderField}
label="Item-Id"
/>
</div>
)}
)}
</div>
)
}
render(){
return(
<div>
<form onSubmit={handleSubmit(this.handleSubmitter)}>
<FieldArray name="items" component={this.renderList} />
</form>
</div>
)
}
}
function mapStateToProps(state) {
return {
initialValues: {
items: state.listings.list
}
}
}
export default connect(mapStateToProps, null)(reduxForm({
form: 'collapseList',
enableReinitialize: true,
validate
}, mapStateToProps)(collapseList));
It can use reducer to track the form change and save the changed field. 它可以使用reducer来跟踪表单更改并保存更改的字段。 The code snippet looks like:
该代码段如下所示:
export const collapseList = (state = {
collapseTemp: null
}, action) => {
switch (action.type) {
case '@@redux-form/CHANGE':
collapseTemp = {}
collapseTemp[action.meta.field] = action.payload
return {
...state,
collapseTemp
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.