[英]How to add validation in Material ui form input fields
我有一个使用包含TextField
的 Material ui 表单构建的反应功能组件,并且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
,您还应该提供其值以确保它们保持同步。
其次,如果您希望required
的道具生效,您应该确保您的提交 function 被表单调用。 required
的道具只是传递给将被包装form
使用的input
元素(所需的解释) 。 因此,如果表单不是调用您提交 function 的表单,则required
将被忽略。
最后,我只提供了一个简单的验证 function,如果您希望它更全面,只需添加更多检查并返回特定错误或错误数组,而不是简单的真假。 如果您只需要简单的必需检查,您也可以完全跳过验证 function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.