javascript - 提交或单击时的 Redux 表单验证直到用户键入后才验证
问题描述
我想我可能有一些配置错误或者可能是误解。
我有一个包含两个字段的表单,我想对其进行验证。验证只是确保在该字段中输入了某些内容。
我可以在表单存在时禁用提交按钮,pristine
但我不太喜欢这样做。我宁愿让用户单击提交,然后查看表单中缺少的内容,或者提交表单(如果可以的话)。
但是,表格似乎只验证我是否输入了一些东西。我可以单击这两个字段,单击退出,导致模糊,甚至提交表单,它不会向我抛出任何验证。它仅验证我是否输入了某些内容然后将其删除,它会说它无效。
我的组件...
import React, {Component} from 'react';
import {Field} from "redux-form";
import {renderField, renderTextArea} from './controls';
class AddCommentModal extends Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false
};
this.toggleModal = this.toggleModal.bind(this);
}
toggleModal() {
this.setState({
modalOpen: !this.state.modalOpen
});
this.props.reset();
}
render() {
const {
modalOpen
} = this.state;
const {
submitting, handleSubmit, addMessage
} = this.props;
return (
<div>
<button onClick={this.toggleModal}>Open Modal</button>
<div className={`modal ${modalOpen ? 'is-active' : ''}`}>
<div className="modal-background">{}</div>
<div className="modal-card">
<form onSubmit={handleSubmit(addMessage.bind(this))}>
<header className="modal-card-head">
<p className="modal-card-title">Modal title</p>
<button className="delete" aria-label="close" type="button" onClick={this.toggleModal}>close</button>
</header>
<section className="modal-card-body">
<Field name="name" type="text"
component={renderField} label="Name"
/>
<Field name="message" rows={6}
component={renderTextArea} label="Message"
/>
<div>
</div>
</section>
<footer className="modal-card-foot">
<button className="button is-success" type="submit" disabled={submitting}>Save changes</button>
<button className="button" type="button" onClick={this.toggleModal}>Cancel</button>
</footer>
</form>
</div>
</div>
</div>
);
}
}
export default AddCommentModal;
我的组件容器
import { connect } from "react-redux";
import AddCommentModal from '../components/AddCommentModal';
import {reduxForm} from "redux-form";
import {addComment} from '../actions/commentActions';
const mapStateToProps = (state, ownProps) => {
return {
};
};
const mapDispatchToProps = (dispatch, ownProps) => {
return {
addMessage: dispatchAddMessage.bind(this)
};
};
const validate = values => {
let errors = {};
if(!values.name || values.name.trim() === '') errors.name = 'Please Provide Your Name';
if(!values.message || values.message.trim() === '') errors.message = 'Please Provide A Message';
return errors;
};
const dispatchAddMessage = (values, dispatch, ctx) => {
return dispatch(addComment(values.name, values.message));
};
const AddCommentModalForm = reduxForm({
form: 'AddCommentModalForm',
validate,
})(AddCommentModal);
export default connect(mapStateToProps, mapDispatchToProps)(AddCommentModalForm);
我最初进行了字段级别验证,因为验证非常简单,但这不起作用,所以尝试了同步验证,但仍然不起作用。有任何想法吗?
解决方案
我不确定您是否仍在寻找此问题的答案,但似乎存在与验证和该reset()
方法的使用相关的问题。在此处参考 GitHub 上的未解决问题:
https://github.com/redux-form/redux-form/issues/2971
线程中包含一些解决方法和更多详细信息。由于您reset
在代码中使用该方法,因此它可能适用于您的问题。
推荐阅读
- reactjs - useState() 没有从事件处理程序更新状态?
- julia - 有没有办法在 Julia 中强制使用隐藏的默认构造函数?
- ruby-on-rails - Rails:通过belongs_to查询has_one在查询中添加PK null
- python - 来自 XYZ csv 格式的栅格
- dynatrace - 来自 Dynatrace 的 /etc/passwd(或任何 xyz 文件)文件更改警报
- sql-server - 我可以根据全新 proc 中的 Column 对多个存储过程进行分组吗?避免重复结果?
- javascript - 香草javascript中的下拉过滤器
- windows - 使用批处理文件变量值扩展路径注册表项值的正确语法
- swift - 如何在 SwiftUI 中删除列表的左右填充?
- scala - 如何找到与当前日期最近的日期