Question

我有一个名为＆＃39; collapseList＆＃39;使用ArrayField呈现对象数组。数据是这样的：

[ 
  { item-name: 'shirt', item-Id: 332 ...}, 
  { item-name: 'shoes', item-Id: 320 ...}
]

问题是如何跟踪阵列中的每个项目是否脏了？例如，在我的数据中，我想知道鞋子对象的输入字段是否是脏的。当字段发生变化时我得到脏更新，我可以更改对象的索引和键，但是我在哪里存储它？我试图在组件中创建一个对象来跟踪它但是当我在setField里面设置setState时，我得到错误，说我不能这样做。我该怎么办？

这是代码的简化版本，如果有人感兴趣并且可以帮助我。

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));

Answer 1

它可以使用reducer跟踪表单更改并保存更改的字段。代码段如下所示：

    export const collapseList = (state = {
      collapseTemp: null
    }, action) => {
      switch (action.type) {
        case '@@redux-form/CHANGE':
          collapseTemp = {}
          collapseTemp[action.meta.field] = action.payload
          return {
            ...state,
            collapseTemp
          }
      }
    }

Redux-Form v6跟踪脏字段

1 个答案: