redux-form - 从父组件获取 redux-form 有效属性

Question

我在“reduxForm”组件之外有我的提交按钮
如果表单无效，如何禁用按钮？

<MainComponent><MyForm/><MyButton disabled={???}/></MainComponent>

Answer 1

使用 isValid或 isInvalid选择器。

isValid(formName:String) returns (state) => valid:boolean Returns true if the form is valid, i.e. has no sync, async, or submission errors. The opposite of isInvalid.

isInvalid(formName:String) returns (state) => invalid:boolean Returns true if the form is invalid, i.e. has sync, async, or submission errors. The opposite of isValid.

import {
  isValid,
  isInvalid
} from 'redux-form'

MyComponent = connect(
  state => ({
    valid: isValid('myForm')(state),
    invalid: isInvalid('myForm')(state)
  })
)(MyComponent)

并在您的渲染功能中使用它来禁用按钮:

<MainComponent><MyForm/><MyButton disabled={this.props.invalid}/></MainComponent>