2017-04-04 110 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