如何清除窗體中的某些字段 - Redux表單

我正在處理一個頁面，該頁面上有許多輸入驗證和邏輯綁定，每次迭代頁面大小都在增加。所以，我必須找到一個美觀且可擴展的解決方案。如何清除窗體中的某些字段 - Redux表單

想象一下，當用戶從下拉菜單中選擇一個值爲'A'時，必須禁用一些字段，必須清除一些字段，並使用默認值初始化一些字段。我可以改變一個相關領域（不必像正則表達式或lenght constrait驗證規則）值與一些小的代碼一樣

this.props.dispatch(change('xForm','xField','xValue'))

我的問題是，當我需要清除多個字段，

它總是我的驗證方法被阻止，清除操作失敗（注意：我應該是這樣，但不是那樣）

。

我嘗試了一些策略如下，但y，z，w字段有一些文本，它觸發驗證規則和處理錯誤。因此，投入仍舊有舊值，而不是清除值。

//Clear  
    this.props.dispatch(change('xForm','yField','')) 
    this.props.dispatch(change('xForm','zField','')) 
    this.props.dispatch(change('xForm','wField',''))

對於具有高度依賴性輸入的頁面，清除輸入或爲某些輸入賦值爲輸入的最佳做法是什麼？

我一直在研究2天，但找不到任何最佳解決方案。（redux normalizer，redux form utils等）

謝謝。

來源

2016-05-12 Tugrul

你在使用immutable.js嗎？ – anoop

還沒有anoop！ – Tugrul

哇，這是一些複雜的邏輯。絕對理想的方法是使用plugin() API在其他字段值更改時更改減速器中的值。這是一個複雜的API，因爲你有完全的控制來減少reducer中的事情，但是你有一個複雜的需求。

但是，派遣三個change()像你說的那樣的行爲你應該也應該正常工作。如果他們有Required驗證消息，您可能還需要/需要untouch()這些字段，您不想顯示此消息。

它總是被我的驗證方法阻塞，清除操作失敗。

您可以詳細說明這是什麼意思，顯示堆棧跟蹤或控制檯錯誤輸出？

來源

2016-05-16 15:07:22

嗨，Erik，我用一些技巧解決了這個問題。不理想的解決方案，但工作正常我會用你的建議改進它。 – Tugrul

我將解釋我是如何解決它的。並注意，untouch（）救了我。 – Tugrul

這是一個有點老...目前我在6.5.0上，但我正在努力與無觸點調度。有沒有一個如何派發一個untouch（）動作的例子？即使我「改變」，然後「解開」領域，他們仍然提交.. – chickenchilli

這爲我工作：

resetAdvancedFilters(){ 
     const fields = ['my','fields','do','reset','properly'] 
     for (var i = 0; i < fields.length; i++) { 
      this.props.dispatch(change('formName',fields[i],null)) 
      this.props.dispatch(untouch('formName',fields[i])) 
     } 
    }

來源

2017-03-15 02:47:37 chickenchilli

那裏。

讓我們看看http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

對於整個表格，我們可以使用4種方法：

A）可以使用插件（）API教了Redux型減速機的行動作出迴應派出當你提交成功。

B）只需卸載窗體組件

C）可以從調用this.props.resetForm（）你的表單裏您提交成功後。

d）可以從任何連接的組件調度復位（）

來源

2017-05-27 20:35:11 SerzN1

清晰多個字段

import {change} from 'redux-form'; 

const fields = {name: '', address: ''}; 
const formName = 'myform'; 

const resetForm = (fields, form) => { 
    Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field]))); 
} 

resetForm(fields,formName);

來源

2017-07-27 04:05:15 vijay

使用下面，它清除各自的多個字段，並且還清除錯誤，如果任何這些各自領域。

重置多個字段的常用功能。

import {change, untouch} from 'redux-form'; 

//reset the respective fields's value with the error if any after 
resetFields = (formName, fieldsObj) => { 
     Object.keys(fieldsObj).forEach(fieldKey => { 

      //reset the field's value 
      this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey])); 

     //reset the field's error 
      this.props.dispatch(untouch(formName, fieldKey)); 

     }); 
}

使用上述常見的功能，

this.resetFields('userDetails', { 
    firstName: '', 
    lastName: '', 
    dateOfBirth: '' 
});

來源

2017-09-25 07:29:39

我做到了這一點。 – Tugrul

嘗試在元對象有以下的有效載荷使用調度功能：

meta.dispatch({ 
    type: '@@redux-form/CHANGE', 
    payload: null, 
    meta: { ...meta, field: name }, 
})

這應該對任何領域的伎倆你想。

來源

2017-12-07 10:59:11 Zero

我發現這是一個更好的辦法，

我們可以使用RF的initialize行動的創建者。

let resetFields = { 
    firstName: '', 
    lastName: '', 
    dateOfBirth: '' 
} 

this.props.initialize(resetFields, true); //keepDirty = true;

如果keepDirty參數爲真時，目前髒字段的值將被保留，以避免覆蓋用戶編輯。

來源

2018-02-17 14:47:25

如何清除窗體中的某些字段 - Redux表單

回答

相關問題