如何解决onSubmit 在“react-material-ui-form-validator”中不起作用
我在我的项目中使用了 react-material-ui-form-validator
。但是 onSubmit
在我提交表单时不会触发。我尝试了很多,但无法解决问题。我不知道为什么 onSubmit
不起作用。有人能解释一下吗?
State
constructor(props) {
super(props);
this.form = React.createRef();
this.state = {
open: false,currentColor: 'purple',newName: '',colors: [],};
}
Validation Rule & handling events
componentDidMount() {
const { colors,currentColor } = this.state;
ValidatorForm.addValidationRule('isColorNameUnique',(value) => {
colors.every(({ name }) => name.toLowerCase() !== value.toLowerCase());
});
// eslint-disable-next-line no-unused-vars
ValidatorForm.addValidationRule('isColorUnique',(value) => {
colors.every(({ color }) => color !== currentColor);
});
}
addNewColor = (event) => {
event.preventDefault();
const { currentColor,colors,newName } = this.state;
const newColor = { color: currentColor,name: newName };
this.setState({ colors: [...colors,newColor],newName: '' });
};
handleChange = (evt) => {
this.setState({ newName: evt.target.value });
};
Validator Form
<ValidatorForm onSubmit={this.addNewColor} ref={this.form}>
<TextValidator
className={classes.textValidator}
value={newName}
placeholder="Color Name"
variant="filled"
margin="normal"
onChange={this.handleChange}
validators={['required','isColorNameUnique','isColorUnique']}
errorMessages={[
'this field is required','Color name must be Unique','Color already used',]}
/>
<Button
className={classes.buttonCenter}
type="submit"
variant="contained"
color="primary"
style={{ backgroundColor: `${currentColor}` }}
>
Add Color
</Button>
</ValidatorForm>
解决方法
我解决了这个问题。以前它没有返回任何 true or false
值,而是返回了 undefined
。现在代码返回 true
或 false
componentDidMount() {
ValidatorForm.addValidationRule('isColorNameUnique',(value) =>
// eslint-disable-next-line react/destructuring-assignment
this.state.colors.every(({ name }) => name.toLowerCase() !== value.toLowerCase())
);
ValidatorForm.addValidationRule('isColorUnique',() =>
// eslint-disable-next-line react/destructuring-assignment
this.state.colors.every(({ color }) => color !== this.state.currentColor)
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。