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

Question

我有一个使用react final表单的日期过滤器，当没有点击任何内容或formState.dirty为"时，我想禁用提交按钮；真"；，当我点击表单中的某个东西，但我不知道如何链接它们时，这一点就会变成真的。我的代码低于

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>