Redux表单字段组件和验证 [英] Redux Form Fields Component and Validation

问题描述

我正在使用redux来基于值隐藏和显示组件.

I am using the redux to hide and show components based on a value.

Redux表单文档提到以下内容:

The Redux form documentation mentions the following:

应谨慎使用连接多个字段，因为每次连接的任何字段发生更改时，都需要重新渲染整个组件.这可能是性能瓶颈.除非绝对需要，否则应使用.

Connecting to multiple fields should be used sparingly, as it will require the entire component to re-render every time any of the fields it is connected to change. This can be a performance bottleneck. Unless you absolutely need to, you should connect to your fields individually with .

我不清楚基于单选按钮隐藏和显示字段的解决方案是否足以使用Fields给出警告，请谨慎使用.

I am unclear if my solution to hiding and showing fields based on radio buttons is good enough to use Fields giving the warning to use sparingly.

能否请您说明我的组件是否有足够的理由使用Fields.如果没有，什么是替代的实现方式?

Can you please clarify if my component merits enough reason to use Fields. If not, what is an alternative way to implement?

此外，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>
     );
  }

推荐答案

还有另一种方法，可以使用redux-form选择器(

There is another way you could do that, selecting the specific value using redux-form selectors (http://redux-form.com/6.0.5/docs/api/Selectors.md/) from the redux store in your mapStateToProps and then conditionally rendering certain components.

但是，我认为Fields正是您在这种情况下应该使用的.我认为警告主要是在警告人们不要将其整个表单放到Fields中，重新渲染这3个字段没什么大不了的.

However, I think that Fields is exactly what you should use in this circumstance. I think that warning is largely to warn people not to go and put their entire form into Fields, having those 3 fields rerender is no big deal.

首先导致创建Fields的思考过程可能是处理此问题的最佳方法: https://github.com/erikras/redux-form/issues/841

The thought process that led to the creation of Fields in the first place is probably the best way to get a handle on this: https://github.com/erikras/redux-form/issues/841

这篇关于Redux表单字段组件和验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！