我有一个使用 Material ui 表单构建的 react 功能组件,其中包含 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
,您还应该提供其值以确保它们保持同步。
其次,如果您希望 required
属性生效,您应该确保表单调用您的提交函数。 required
属性仅传递给 input
元素,该元素将由包装 form
使用 (explanation of required) 。因此,如果表单不是调用提交函数的表单,则 required
将被忽略。
最后,我只提供了一个简单的验证功能,如果您希望它更全面,只需添加更多检查并返回特定错误或错误数组,而不是简单的 true 或 false。如果您只需要简单的必要检查,您也可以完全跳过验证功能。
关于javascript - 如何在 Material ui 表单输入字段中添加验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58400278/