我创建了一个表单,我想在上面验证输入,我看到 material UI 有一个名为 error
boleean 的属性和另一个名为 helperText 的属性
用于表单的 TextField
输入,但我没有发现任何有关如何在未满足验证条件时在元素上注入(inject)该错误的信息
这是我的代码示例:https://codesandbox.io/s/material-demo-hip84?file=/demo.js:1020-1055
const [form, setForm] = useState({ name: "", email: "", remember: "" });
const onChange = i => {
setForm({ ...form, [i.target.name]: i.target.value });
};
const handleSubmit = e => {
e.preventDefault();
console.log(form);
e.target.reset();
};
return (
<form className={classes.root} autoComplete="off" onSubmit={handleSubmit}>
<Grid container spacing={4}>
{Object.keys(form).map((objKey, idx) => {
return (
<Grid item xs={12} sm={6} md={4} key={idx}>
<TextField
error
helperText="No Value added in this field"
id={`input${idx}`}
label={objKey}
name={objKey}
fullWidth={true}
onChange={onChange}
/>
</Grid>
);
})}
<Grid item xs={12} sm={12} md={12}>
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</Grid>
</Grid>
</form>
);
最佳答案
要使用 TextField
的 error
属性,您需要自己管理错误(就像您管理字段的值一样)。
要做到这一点 - error
的值不应该是固定的,而应该是 true/false,基于你正在做的一些计算。
我使用您的代码检查值(对于每个字段)是否等于特定值。这不是一个真实的例子,您可能想将其更改为某种正则表达式检查,但这应该给您一个很好的起点:
export default function SubmitForm() {
const classes = useStyles();
const [form, setForm] = useState({ name: "aaa", email: "bbb", remember: "ccc" });
const isValidData = {name: "aaa", email: "bbb", remember: "ccc"};
...
const checkIsValid = (fieldName, value) => {
// Here you probably what to check this to some regex validation
if (isValidData[fieldName] === value) {
return true;
}
return false;
}
return (
...
{Object.keys(form).map((objKey, idx) => {
return (
<Grid item xs={12} sm={6} md={4} key={idx}>
<TextField
error={!checkIsValid(objKey, form[objKey])}
...
/>
</Grid>
);
})}
);
}
要查看完整的工作示例,请查看:https://codesandbox.io/s/mui-textfield-control-errors-z0tfo?file=/demo.js
关于javascript - 使用错误和 helperText react Material UI 表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61381370/