javascript - 使用 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));