使用formValueSelector的多个Redux-form

import { formValueSelector } from 'redux-form';
import { connect } from 'react-redux';

const MyForm = props => {
  const { selectorValue } = props;
  
  // 根据A字段的值计算B字段的值
  const calculateBFieldValue = () => {
    // ...
  };

  // 监听A字段的变化并更新B字段的值
  useEffect(() => {
    calculateBFieldValue();
  }, [selectorValue]);

  return (
    // 表单组件的渲染
  );
};

const mapStateToProps = state => {
  const selector = formValueSelector('myFormName');
  return {
    selectorValue: selector(state, 'A'),
  };
};

export default connect(mapStateToProps)(MyForm);

import { formValueSelector } from 'redux-form';
import { connect } from 'react-redux';

const MyForm = props => {
  const { selectorValue } = props;
  
  // 根据C字段的值计算D字段的选项
  const calculateDFieldOptions = () => {
    // ...
  };

  // 获取C字段的值并更新D字段的选项
  useEffect(() => {
    calculateDFieldOptions();
  }, [selectorValue]);

  return (
    // 表单组件的渲染
  );
};

const mapStateToProps = state => {
  const selector = formValueSelector('myFormName');
  return {
    selectorValue: selector(state, 'C'),
  };
};

export default connect(mapStateToProps)(MyForm);

import { formValueSelector } from 'redux-form';
import { connect } from 'react-redux';

const MyForm = props => {
  const { selectorValue } = props;
  
  // 根据E字段的值进行自定义的验证逻辑
  const validateFField = () => {
    // ...
  };

  // 监听E字段的变化并进行验证
  useEffect(() => {
    validateFField();
  }, [selectorValue]);

  return (
    // 表单组件的渲染
  );
};

const mapStateToProps = state => {
  const selector = formValueSelector('myFormName');
  return {
    selectorValue: selector(state, 'E'),
  };
};

export default connect(mapStateToProps)(MyForm);