我正在使用redux表单,并希望自定义验证消息。
我在这里使用了他们的示例验证项目: https://codesandbox.io/s/PNQYw1kVy
按原样,它按预期工作。如果我从
更改必填字段的验证功能 const required = value => value ? undefined : 'Required'
到
const required = message => value => value ? undefined : message || 'Required'
并从
更改名称和电子邮件的验证定义 validate={[ required ]}
到
validate={[ required('Message') ]}
或validate={[ required(null) ]}
然后它不处理验证。
为什么会这样?据我所知,如果我们有const myFunc = val => val
和const myFunc2 = () => val => val
,那么[myFunc, myFunc2()]
会产生一个包含2个功能相同的函数的数组。
答案 0 :(得分:1)
不要将验证函数包装到另一个函数中,每次渲染表单时它都会构造一个新函数,这会导致字段重新渲染(因为this.props.validate !== nextProps.validate
)。(检查这个issue on github )
您可以使用特定定义的参数化验证规则实例:
const required = value => value ? undefined : 'Required';
const requiredMessage = required('Message');
<Field
name="username"
type="text"
component={renderField}
label="Username"
validate={requiredMessage}
/>
此外,这就是为什么在表单组件中定义的验证函数不起作用的原因。
const FormComponent = (props) => {
const {handleSubmit, submitting} = props;
const required = value => value ? undefined : 'Required'; //this will not work!!!
return <form onSubmit={handleSubmit}>
<Field
name='username'
type='text'
component={renderField}
label='Username'
validate={required}
/>
<div>
<button type="submit" disabled={submitting}>Submit</button>
</div>
</form>;
};