2017-04-04 84 views
6

我正在使用redux根據值隱藏和顯示組件。Redux表單字段組件和驗證

了Redux形式文檔提到下列:

連接到多個字段應謹慎使用,因爲它會需要整個部件重新渲染每次任何它連接到改變字段。這可能是性能瓶頸。除非你絕對需要,否則你應該單獨連接到你的領域。

我不清楚,如果我的解決方案基於單選按鈕隱藏和顯示領域是好足夠使用Fields給予警告,應謹慎使用。

您能否澄清我的組件是否有足夠的理由使用Fields。如果沒有,那麼實施的另一種方法是什麼?

另外,fields如何實現驗證?

<div> 
    <form> 
     <Fields 
     component={RadioButtonGroupField} 
     names={['radioButtonGroup', 'nameTextField', 'nickNameTextField']} 
     /> 
    </ form> 
</div> 

function RadioButtonGroupField(fields) { 
    return(
     <div> 
     <RadioButtonGroupComponent 
      {...fields.radioButtonGroup.input} 
      {...fields.radioButtonGroup.meta} 
     /> 
     { 
      (fields.radioButtonGroup.input.value === 'name' || 
      fields.radioButtonGroup.input.value === 'both') && 
      <NameTextFieldComponent 
      {...fields.radioButtonGroup.input} 
      {...fields.radioButtonGroup.meta} 
      /> 
     } 
     { 
      (fields.radioButtonGroup.input.value === 'nickname' || 
      fields.radioButtonGroup.input.value === 'both') && 
      <NicknameTextFieldComponent 
      {...fields.radioButtonGroup.input} 
      {...fields.radioButtonGroup.meta} 
      /> 
     } 
     </div> 
    ); 
    } 

回答

1

還有另一種方式,你能做到這一點,在你mapStateToProps然後有條件地渲染某些組件選擇特定使用Redux的形式選擇器(http://redux-form.com/6.0.5/docs/api/Selectors.md/)從終極版儲值。

但是,我認爲Fields正是你應該在這種情況下使用。我認爲這個警告主要是警告人們不要把他們的整個表格都放到菲爾茲那裏,讓這三個領域放棄是沒有什麼大不了的。

的思維過程,導致擺在首位創造Fields可能得到這個句柄的最佳方式:https://github.com/erikras/redux-form/issues/841

+0

我怎麼會去使用領域實施驗證? – eNddy

+0

這是個好問題@eNddy!我不確定到底是什麼意思來驗證'Fields'。我確信你已經注意到沒有驗證的論點。顯而易見的方法是隻使用syncValidation:http://redux-form.com/6.6.1/examples/syncValidation/ – dpwrussell

+0

我認爲如果可能有類似的東西: ''。 @dpwrussell你認爲這樣的事情有可能嗎?我似乎很高興不要污染全球異步驗證? – eNddy