>我正在寻找最非侵入性的方法来禁用用于开发/调试目的
的 redux 表单验证我有一个类似于教程 https://redux-form.com/8.1.0/examples/wizard/的向导表单,但我正在使用字段验证器和异步验证器
我仍然想显示错误,但即使验证失败
也能继续执行下一个向导步骤我想在网址上添加一个标志,例如 ?ignore-validation=true(使用 react router)
这是我的向导步骤1的片段:
export class CustomerStep1 extends React.PureComponent<FormProps> {
render(): React.Node {
const {
handleSubmit,
} = this.props;
const submit = handleSubmit(createValidateCardAction);
return (
<form onSubmit={submit}>
<Field
name="card_number"
placeholder="7777 1234 5678 9012"
component={Input}
validate={cardNumber}
/>
...
export default reduxForm({
form: 'customerWizard',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
})(CustomerStep1);
我在这里看到了两种可能性:
1) 将向导表单拆分为多个表单并分别验证它们。您可以创建另一个状态来控制要显示的表单。即使它有更多的州要管理,我也会选择那个。
2)您可以只保留每个字段的异步验证并在那里抛出错误。此外,您必须创建一个状态来管理页面,并在异步验证函数中对其进行管理。我创建了第二种方法的示例:https://codesandbox.io/s/o46k8lx7kz