如果提交在表单之外，如何切换提交按钮“禁用”状态？答案

【问题标题】：How to toggle Submit button `disabled` state if the submit is outside the form?如果提交在表单之外，如何切换提交按钮“禁用”状态？
【发布时间】：2017-01-20 09:08:05
【问题描述】：

在 redux-form Simple Form 示例（http://redux-form.com/6.4.3/examples/simple/）中，我们可以看到如何使用 redux-form 生成的 props 来控制按钮的 disabled 状态： <button type="submit" disabled={pristine || submitting}>Submit</button>

在我的情况下，提交按钮位于我的表单之外的不同组件中，我使用的方法类似于远程提交示例 (http://redux-form.com/6.4.3/examples/remoteSubmit/)

import React from 'react'
import { connect } from 'react-redux'
import { submit } from 'redux-form'

const RemoteSubmitButton = ({ dispatch }) =>
<button
    type="button"
    onClick={() => dispatch(submit('remoteSubmit'))}>Submit
</button>

export default connect()(RemoteSubmitButton)

但我仍然希望能够控制按钮的disabled 状态。如何以最优化的方式做到这一点？

【问题讨论】：

标签： redux-form

【解决方案1】：

这个问题的答案是 redux-form 选择器，如下所述：http://redux-form.com/6.4.3/docs/api/Selectors.md/

import React from 'react';
import { connect } from 'react-redux';
import { submit, isValid, isPristine, isSubmitting } from 'redux-form';

const RemoteSubmitButton = ({ dispatch, valid, pristine, submitting, formName }) =>
<button
    disabled={!valid || pristine || submitting}
    type="button"
    onClick={() => dispatch(submit(formName))}>Submit
</button>

const mapStateToProps = (state, ownProps) => ({
    valid: isValid(ownProps.formName)(state),
    submitting: isSubmitting(ownProps.formName)(state),
    pristine: isPristine(ownProps.formName)(state),
});

export default connect(mapStateToProps)(RemoteSubmitButton)

将formName 属性传递给该组件，以告知该按钮将要提交的表单的名称，例如 <RemoteSubmitButton formName={'remoteSubmit'}

【讨论】：