React表单警告:收到非布尔属性validate的true



我想尝试摆脱这个警告

index.js:1 Warning: Receivedtruefor a non-boolean attributevalidate。如果您想将其写入DOM,则传递一个字符串:validate="true"或验证= {value.toString ()} .

我正在为订阅用户制作一个验证表单。我显示工具提示,当电子邮件字段没有填写,用户试图按下订阅按钮。

下面是我的表单(使用材质UI样式):
<Form
onSubmit={onSubmit}
initialValues={{ userEmail: 'johndoe@example.com', arn: 'AA-01-23-45-678901-2' }}
validate={validate}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit} validate>
<DialogContentText>
To subscribe to this website, please enter your email address here. We will send updates
occasionally.
</DialogContentText>
<TextField
label="Email Address"
name="userEmail"
margin="none"
required={true}
fullWidth
/>
{formSubmitted && <Grid item xs={12}>
<Typography name='submitMessage' variant='subtitle1'>You have subscribed to {values.arn}. {/* Connect to backend here */}</Typography>
</Grid>}
<DialogActions>
<Button /* onClick={handleClose} */ color="primary" type="submit" disabled={submitting}>
Subscribe
</Button>
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
</form>
)}
/>

和我的验证函数外的组件函数,但在同一个js文件:

const validate = values => {
const errors = {};
if (!values.userEmail) {
errors.userEmail = 'Required';
}
return errors;
};

对于将来的读者,问题最终与我在表单标记中使用的验证函数有关!

最新更新