使用 Redux Form，如果没有填写任何字段，如何禁用提交按钮？

Question

我正在使用Redux Form v.7.1.2 并尝试最初禁用提交按钮。当用户激活change 或keyup 事件时，我希望表单检查表单中的任何表单字段是否具有任何值。如果是这样，我希望启用提交按钮。我没有任何必填字段。我只需要确保其中至少有一个填写了值。

我已经在 jQuery 中实现了这一点：

// Change disabled attribute on search box submit button depending on if there is a value in any field
  $searchFormFields.on('change keyup', function() {
    $('#search-box-search-btn').prop('disabled', true);
    $searchFormFields.each(function() {
      if ($(this).val().length > 0) {
        $('#search-box-search-btn').prop('disabled', false);
        return false; // break the loop
      }
    });
  });

不过，我现在正在将该站点转换为使用 React 和 Redux，但我完全不知道从哪里开始尝试让它工作。有什么想法吗？

Answer 1

如果您只想检查是否没有填写任何字段，可以使用以下行：

<button type="submit" disabled={this.props.pristine}>Submit</button>

pristine 是 redux-form 添加的一个 prop，如果表单没有填写任何字段，你可以参考它。您可以查看更多in their API Docs。它将当前表单值与表单上的初始值进行比较。

如果表单自上次提交以来没有更改，我实际上需要禁用按钮。

为了检查该条件，您可以在提交表单时将当前值指定为初始值。然后在判断表单是否为pristine 时，redux-form 会将任何当前值与最近一次提交时设置的最后初始值进行比较。

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));