Question

我是redux的新手，我有一个带有“提交”按钮的表单，我想在某些条件下在向用户显示表单时禁用该按钮。我在组件的构造函数中调用了两个操作，如下所示。INIT_FORM用于预填充用户数据，而DISABLE_BUTTON用于禁用按钮。我注意到我的表单在显示给用户之前已被填充，但是“提交”按钮花了一些时间才被禁用，对于用户体验而言，这并不是一件好事。尽管我在组件构造函数中将其调用，但在显示表单后将禁用disableButtonAction。这是我的代码的一部分：

class editUser extends React.Component {
  constructor(props) {
    super(props);

    props.inititForm(props.userInfo);
    props.disableChange();
    ...

  switch (action.type) {
    case INIT_FORM: {
      ...
    }
    case DISABLE_BUTTON: {
      return { ...state, isButtonDisabled: action.payload };
    }
    default:
      return state;
  }
  ...

const mapDispatchToProps = dispatch => ({
  inititForm: companyInfo => dispatch(initFormAction(companyInfo)),
  disableButton: () => dispatch((disableButtonAction())),
...
  ),

   <Suspense fallback=...>
              <Switch>
                <Route exact path={routes.EDIT_USER} component={EditUserContainer} />
              </Switch>
   </Suspense>

Answer 1

您无需在DISABLE_BUTTON中使用action.payload。要禁用它，您可以将其设置为true。

按钮将被禁用。（作为初始状态）
只要您拨打disableButtonAction

switch (action.type) {
    case INIT_FORM: {
        return { ...state, isButtonDisabled: true }; <-- 1
    }
    case DISABLE_BUTTON: {
        return { ...state, isButtonDisabled: action.payload }; <-- 2
    }
    default:
        return state;
}
...

Redux-如何在显示页面之前禁用提交按钮？

1 个答案: