javascript - 如何在 Material ui 表单输入字段中添加验证
问题描述
我有一个使用 Material ui 表单构建的反应功能组件,其中包含TextField
和onChange
事件在“容器组件”中处理。下面是我需要添加required
为客户端表单验证的表单代码,但它不起作用。我是否还需要在容器组件中添加一些逻辑?
<form className={classes.container}>
<Grid container item xs={12} alignItems="center">
<TextField
id="outlined-bare"
className={classes.textField1}
defaultValue=""
required
margin="normal"
variant="outlined"
autoComplete="on"
InputProps={{ style: { height: 40 } }}
onChange={(e) => handleChange(e, 'Name')}
/>
这是容器组件中的事件处理程序,如下所示
setInput = (e, source) => {
e.preventDefault();
switch (source) {
case "Name":
this.setState({
...this.state,
Name: e.target.value
})
break;
default:
this.setState({...this.state})
break;
}
}
return (
<div>
<Drawer
route={routes.abc}
history={this.props.history}
handleChange={this.setInput}
/>
</div>
)
有什么问题,遗漏了什么?我是 ReactJs 的新手。请建议。
解决方案
有了可用的信息,我建议执行以下简化版本之类的操作:
容器
class Container extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
other_value: '',
}
}
handleChange = (field, value) => {
this.setState({ [field]: value });
}
valid = () => {
if (!this.state.name) {
return false;
}
}
submit = () => {
if (this.valid()) {
// call your redux submit
}
}
render() {
return (
<MyForm
values={this.state}
handleChange={this.handleChange}
submit={this.submit}
/>
);
}
}
表单组件
const MyForm = (props) => {
return (
<form onSubmit={props.submit}>
<TextField
onChange={(e) => props.handleChange('name', e.target.value)}
value={props.values.name}
required
/>
<TextField
onChange={(e) => props.handleChange('other_value', e.target.value)}
value={props.values.other_value}
/>
<button type="submit">Submit</button>
</form>
);
}
首先,如果您onChange
在输入上使用 an,您还应该提供其值以确保它们保持同步。
其次,如果你想让道required
具有效果,你应该确保你的提交函数被表单调用。required
道具只是传递给将被包装使用的元素input
(form
需要的解释)。因此,如果表单不是调用您的提交函数的表单,required
将被忽略。
最后,我只提供了一个简单的验证函数,如果您希望它更全面,只需添加更多检查并返回特定错误或错误数组,而不是简单的真假。如果您只需要一个简单的必需检查,您也可以完全跳过验证功能。
推荐阅读
- xml - 与元素类型“名称”关联的属性“{1}”应为开放引号
- python - 使用熊猫检查值存在于哪一列
- php - 带有if和else语句的foreach循环在if语句为假时不执行else语句
- unity3d - 脚本中只有三分之一的条件(徽标)有效,其他徽标不响应 - unity3D
- here-api - 这里的 api,移动 SDK 中的 RouteFeatureWeightType
- angular - 如何将csv文件保存到本地路径,而不是下载它?
- ios - iOS13 DiffableDataSource 无效参数不满足:indexPath || 忽略无效项
- reactjs - react/no-did-update-set-state linter 规则替代
- javascript - 反应本机问题
- python - Tensorflow 正确安装和导入,但在尝试使用时抛出异常