如何在不同的操作中向 redux-form 字段添加不同的错误

Question

我的 redux 表单有两个动作，一个是 onclick，我只需要验证一个字段，在第二个动作中我需要提交动作。我怎样才能做到这一点

class BLoginForm extends React.PureComponent{
render(){
    const { handleSubmit, pristine, reset, submitting, onSubmit, openForgotForm } = this.props;
    return (
        <FormCon>
            <form onSubmit = { handleSubmit(onSubmit) }>
                <Field name = "username" type = "text" component = { BInputPhone } label = "Email or Mobile number" />
                <Field name = "password" type = "password" component = { BInput } label = "Password" />
                <a onClick = { openForgotForm } >forgot</a>
                <div>
                    <BPrimaryBtn type = "submit" disabled = { submitting }>LOGIN</BPrimaryBtn>
                </div>
            </form>
        </FormCon>
    );
}

}

Answer 1

为了理解，我有 3 种不同的形式。

function submitForms() {
  dispatch(submit('FirstOne'))  // First form
  dispatch(submit('secondOne')) // Second form
  dispatch(submit('thirdOne'))  // Thrid form
}
<Button type="button" onClick={ submitForms } />

使用此功能，您将触发所有表单的提交功能。

您可以实现每个提交以调度多个操作

const mapstateToProps = (state,ownProps) => {
  {... do some stuff ... }

return {
  submit : (values, dispatch, props) => {
         dispatch(YOUR ACTIONS) // So to validate one field ?
         dispatch(YOUR ACTIONS) // dispatch your second actions.
    }
 }


export default Form = connect(mapStateToProps)(reduxForm({
  form:'YoURFORMNAME'
})(YoURFORMCOMP))

我可以补充一点，如果您只想验证表单的几个字段，您可以创建一个简单的验证为

const required = value => (value ? undefined : 'Required')

并将其添加到您的字段中

<Field {...props}
    validate={required}
</Field>