reactjs - 使用 Redux 形式的依赖字段访问字段值

Question

我有一个带有 redux-form HOC 的装饰组件，我想从装饰组件访问一个 Field 值以启用/禁用和隐藏/显示其他字段。最好的方法是什么？

我尝试使用 Fields 组件在依赖字段中操作，但这会损害装饰组件的性能，因为它会引发无用的重新渲染

也可以将装饰组件与redux连接起来，使用redux-form提供的formValueSelector，但不知是否有更好的接入方式字段值。

Answer 1

描述了表单选择器和字段相关值 here .该解决方案基于getFormValues:

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, getFormValues } from 'redux-form';

import FormComponent from './form.component';

export const FormContainer = props => {
  const submitForm = (formValues) => {
    console.log('submitting Form: ', formValues);
  }

  return (
    <FormComponent
      formValues={props.formValues}
      change={props.change}
      onSubmit={submitForm}
      handleSubmit={props.handleSubmit}
    />
  );
}

const mapStateToProps = state => ({
  formValues: getFormValues('my-very-own-form')(state),
});
const formConfiguration = {
  form: 'my-very-own-form',
}

export default connect(mapStateToProps)(
  reduxForm(formConfiguration)(FormContainer)
);

在您的 formComponent 中，您可以从 Prop 中获取 formValues:

export const FormComponent = ({ handleSubmit, onSubmit, formValues }) => {
}