Question

在redux-form Simple Form示例（http://redux-form.com/6.4.3/examples/simple/）中，我们可以看到如何使用props redux-form生成控制按钮的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状态。如何以最佳方式完成这项工作？

Answer 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'}

如果提交在表单之外，如何切换提交按钮`disabled`状态？

1 个答案: