![](/img/trans.png)
[英]Using Redux Form, how can I disable the submit button if no fields have been filled out?
[英]Using Redux Form, how do I only submit if any fields have changed?
我使用的是Redux Form v.7.1.2,当前是在用户单击“提交”按钮时提交的。 在分配给它运行的功能中,我执行一个动作。 我只希望在自上一次提交以来至少更改了一个值的情况下执行该操作。 我怎样才能做到这一点?
这是我目前的代码:
import { Field, reduxForm } from 'redux-form';
class SearchFilters extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(values) {
// Only perform this action if at least one value was changed since the last submit
this.props.doSomething(values);
}
renderField(field) {
return (
<div className="search-parameter">
<input type="text" {...field.input} />
</div>
);
}
render() {
const { handleSubmit, pristine, submitting, invalid } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit)} >
<Field
component={this.renderField}
key="keyword"
name="keyword"
/>
<Field
component={this.renderField}
key="type"
name="type"
/>
</form>
);
}
}
export default reduxForm({
validate,
form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));
import { isDirty } from 'redux-form'
const mapStateToProps = state => ({
...
isDirty: isDirty('myForm')(state),
})
然后在render方法中,您将可以访问
this.props.isDirty
我认为将先前提交的值存储在state
可以解决此问题:
import { Field, reduxForm } from 'redux-form';
class SearchFilters extends Component {
constructor(props) {
super(props);
this.state = {
values: ''
};
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(values) {
// check if states are same, if not, setState and doSomething
const valueString = JSON.stringify(values);
if ( this.state.values !== valueString ) {
this.setState({ values: valueString });
this.props.doSomething(values);
}
}
renderField(field) {
return (
<div className="search-parameter">
<input type="text" {...field.input} />
</div>
);
}
render() {
const { handleSubmit, pristine, submitting, invalid } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit)} >
<Field
component={this.renderField}
key="keyword"
name="keyword"
/>
<Field
component={this.renderField}
key="type"
name="type"
/>
</form>
);
}
}
export default reduxForm({
validate,
form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));
另外,您可以使用提交的值来更新initialValues
,这样pristine/dirty
就会通知您。
感谢Erik R的建议,我设法弄清楚了在提交表单时如何更新initialValues
。 然后redux-form可以将当前值与最后设置的initialValues
进行比较,以确定该表单是否为pristine/dirty
。
import { Field, reduxForm } from 'redux-form';
class SearchFilters extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(values) {
// Check if the form values have changed since the last submit
// The dirty boolean (signifies if the form has changed from its initial values) is established by redux-form by comparing the currently entered values to the initial form values
// After we identify the form as having been changed, we will send the new form values to replace the original initial form values so redux-form is always comparing the current form values against the last submitted form values
if (this.props.dirty) {
// Set the initial values for the form on the redux store (This is used by redux form to compare the current values to the initial values so we can determine if there are new values since the last submit)
this.props.initialize(values);
}
}
renderField(field) {
return (
<div className="search-parameter">
<input type="text" {...field.input} />
</div>
);
}
render() {
const { handleSubmit, submitting, invalid } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit)} >
<Field
component={this.renderField}
key="keyword"
name="keyword"
/>
<Field
component={this.renderField}
key="type"
name="type"
/>
<button
type="submit"
disabled={submitting || pristine || invalid}
>
Search
</button>
</form>
);
}
}
export default reduxForm({
validate,
form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.