如何根据表单的脏属性更改提交按钮的可用性？

Question

我有一个使用react final form的日期过滤器，当没有任何东西被点击时，或者当formState.dirty为" true“时，我想禁用submit按钮，当我单击表单中的某个东西时，该按钮变为true，但我不知道如何链接它们。我的代码如下

​

let handleButtonDisable = true;      //here I created a variable which I want to use for handling submit button availability

  const handleChange = formState => {      
    if (formState.dirty) {                       
      onChange(formState.values);
      console.log(formState.dirty);
      handleButtonDisable = !formState.dirty;    //here is where I tried to link the dirty property to the handler
    }
  };

  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,
        } = 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 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={handleButtonDisable} type="submit">
              {submit}                  //here is the submit button I want to conditionally 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>
        );
      }}
    />
  );
};

​

Answer 1

试试这个：

<button className={css.submitButton} disabled={formState.dirty?true:false} type="submit">

Answer 2

只需将formState.dirty传递给按钮disabled属性即可。

<button 
 className={css.submitButton} 
 disabled={formState.dirty} 
 type="submit"
>
  {submit}                 
</button>