当使用FormSpy时，如何禁用最终形式的提交按钮？

Question

我正在做一个来自sharetribe的模板，我不得不修改一个日期可用性筛选器，但是当我想对submit按钮设置条件以禁用从日期窗格中选择的任何内容时，我被困住了。我试图添加道具提交，原始，无效，并使用他们为此，但它没有工作。以下是代码：

​

const FilterFormComponent = props => {
  const { liveEdit, onChange, onSubmit, onCancel, onClear, ...rest } = props;

  if (liveEdit && !onChange) {
    throw new Error('FilterForm: if liveEdit is true you need to provide onChange function');
  }

  if (!liveEdit && !(onCancel && onClear && onSubmit)) {
    throw new Error(
      'FilterForm: if liveEdit is false you need to provide onCancel, onClear, and onSubmit functions'
    );
  }

  const handleChange = formState => {
    if (formState.dirty) {
      onChange(formState.values);
    }
  };

  const formCallbacks = liveEdit ? { onSubmit: () => null } : { onSubmit, onCancel, onClear };
  return (
    <FinalForm
      {...rest}
      {...formCallbacks}
      mutators={{ ...arrayMutators }}
      render={formRenderProps => {
        const {
          id,
          form,
          handleSubmit,
          onClear,
          onCancel,
          style,
          paddingClasses,
          intl,
          children,
          submitting
        } = formRenderProps;

        const handleCancel = () => {
          // reset the final form to initialValues
          form.reset();
          onCancel();
        };

        const clear = intl.formatMessage({ id: 'FilterForm.clear' });
        const cancel = intl.formatMessage({ id: 'FilterForm.cancel' });
        const submit = intl.formatMessage({ id: 'FilterForm.submit' });

        const classes = classNames(css.root);

        const spy =
          liveEdit || onChange ? (
            <FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
          ) : null;

          const handleButtonsAvailability = spy ? false : true;

        const buttons = !liveEdit ? (
          <div className={css.buttonsWrapper}>
            <button className={css.clearButton} type="button" onClick={onClear}>
              {clear}
            </button>
            {/* <button className={css.cancelButton} type="button" onClick={handleCancel}>
              {cancel}
            </button> */}
            <button className={css.submitButton} disabled={handleButtonsAvailability} type="submit">
              {submit}           //this is the submit button I want to disable
            </button>
          </div>
        ) : null;

        return (
          <Form
            id={id}
            className={classes}
            onSubmit={handleSubmit}
            tabIndex="0"
            style={{ ...style }}
          >
            <div className={classNames(paddingClasses || css.contentWrapper)}>{children}</div>
            {spy}
            {buttons}
          </Form>
        );
      }}
    />
  );
};

FilterFormComponent.defaultProps = {
  liveEdit: false,
  style: null,
  onCancel: null,
  onChange: null,
  onClear: null,
  onSubmit: null,
};

FilterFormComponent.propTypes = {
  liveEdit: bool,
  onCancel: func,
  onChange: func,
  onClear: func,
  onSubmit: func,
  style: object,
  children: node.isRequired,

  // form injectIntl
  intl: intlShape.isRequired,
};

const FilterForm = injectIntl(FilterFormComponent);

​

Answer 1

您需要将字段验证添加到FilterForms组件(它使用的是组件)。由于字段是通过props.children传入的，因此需要添加validate函数来更正字段(处理日期选择器)。

因此，Field具有可选的验证属性，该属性的工作方式类似于

validate={value => (value ? undefined : "Required")}

因此，实现这一目标的步骤如下：

1. 为正确的字段添加验证器函数。
2. 从无效中提取“formRenderProps”值。
3. 如果“无效”道具为真，禁用提交按钮。

最后一步需要这样的东西：

<button className={classNames(css.submitButton, {[css.submitButtonInvalid]: invalid })} type="submit" disabled={invalid}>
  {submit}
</button>

在上面的代码中，我假设有code类: css.submitButtonInvalid，它改变了按钮的颜色。

注1：src/util/valdators.js中有一些现有的验证器

注2:您可以通过在本地环境中打开/styleguide/c/FilterForm/FilterFormExample页面来播放FilterForm.example.js。