Question

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

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

也可以将装饰组件与redux连接，并使用formValueSelector提供的redux-form，但我想知道是否有更好的方法来访问字段值。< / p>

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中，您可以从道具中获取formValues：

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

使用Redux-form依赖的字段访问Field值

1 个答案: