简体   繁体   English

Redux-Form v6跟踪脏字段

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM