如何从父组件获取redux-form的valid属性？外置提交按钮如何按需禁用？

我来给你捋清楚怎么解决这个问题哈，核心思路就是让父组件能拿到redux-form存在store里的表单有效性状态，然后把这个状态绑定到按钮的disabled属性上就行。下面分两种组件类型给你具体说明：

一、函数组件方案（React Hooks） #

1. 给表单指定唯一标识
   首先给你的MyForm组件加上form属性，设置一个独一无二的名称，比如：

   <MyForm form="userProfileForm" />
   

2. 在父组件中获取表单valid状态
   利用redux的useSelector钩子，结合redux-form提供的formValueSelector工具，直接从store里取表单的有效性状态：

   import { useSelector } from 'react-redux';
   import { formValueSelector } from 'redux-form';
   
   const MainComponent = () => {
     // 创建对应表单的选择器
     const formSelector = formValueSelector('userProfileForm');
     // 从store中获取valid状态，注意处理表单未初始化的情况
     const isFormValid = useSelector(state => {
       const formState = state.form.userProfileForm;
       return formState ? formState.valid : false;
     });
   
     return (
       <div>
         <MyForm form="userProfileForm" />
         {/* 表单无效时禁用按钮 */}
         <MyButton disabled={!isFormValid} />
       </div>
     );
   };
   

二、类组件方案（connect高阶组件） #

1. 同样先给表单加唯一标识
   和函数组件一样，先给MyForm设置form属性：

   <MyForm form="userProfileForm" />
   

2. 通过connect映射表单状态到props
   用redux的connect把store里的表单状态映射到父组件的props中：

   import { connect } from 'react-redux';
   import { formValueSelector } from 'redux-form';
   
   class MainComponent extends React.Component {
     render() {
       return (
         <div>
           <MyForm form="userProfileForm" />
           <MyButton disabled={!this.props.isFormValid} />
         </div>
       );
     }
   }
   
   // 创建表单选择器
   const formSelector = formValueSelector('userProfileForm');
   
   const mapStateToProps = state => {
     // 获取valid状态，兼容表单未初始化的场景
     const formState = state.form.userProfileForm;
     return {
       isFormValid: formState ? formState.valid : false
     };
   };
   
   // 用connect包装父组件
   export default connect(mapStateToProps)(MainComponent);
   

额外说明 #

redux-form会把所有表单的状态存在redux store的state.form路径下，每个表单对应一个以form属性命名的对象，里面包含valid（是否有效）、dirty（是否修改过）等状态字段。我们只要精准定位到目标表单的valid值，就能控制外部按钮的禁用状态了。

内容的提问来源于stack exchange，提问作者Francesco Persico