禁用按钮，直到所有表单字段都填写在 Formik答案

【问题标题】：Disable button till all the form fields get filled in Formik禁用按钮，直到所有表单字段都填写在 Formik
【发布时间】：2020-11-12 02:41:45
【问题描述】：

我正在使用 Formik 表单。我里面有两个字段。我需要禁用保存按钮，直到两个字段都填满。

<Formik initialValues={initialValues} validationSchema={validate} onSubmit={() => this.handleSubmit()}>
  {({ values, handleChange, handleSubmit, setValues, isSubmitting }) => (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Company </h6>
          <input name="customer" readOnly placeholder="Select" value={values.customer} type="text" />
        </div>
        <ErrorMessage component="span" name="customer" />
      </div>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Driver</h6>
          <input name="driver" readOnly placeholder="Select" value={values.driver} type="text" />
        </div>
        <ErrorMessage component="span" name="driver"/>
      </div>
      <button type="submit" disabled={isSubmitting}>
        Save
      </button>
    </form>
  )}
</Formik>

【问题讨论】：

这能回答你的问题吗？ React formik form validation: How to initially have submit button disabled
@HarmandeepSinghKalsi 试过了，但没用
你检查了吗？ github.com/formium/formik/issues/147
@HarmandeepSinghKalsi github 中的解决方案对我有用。但是formik本身还是应该有自己的方式
如果你觉得没有办法，可以在github上开一个issue。

标签： javascript reactjs forms formik

【解决方案1】：

<Formik initialValues={initialValues} validationSchema={validate} onSubmit={() => this.handleSubmit()}>
  {({ values, handleChange, handleSubmit, setValues, isSubmitting, dirty, isValid }) => (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Company </h6>
          <input name="customer" readOnly placeholder="Select" value={values.customer} type="text" />
        </div>
        <ErrorMessage component="span" name="customer" />
      </div>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Driver</h6>
          <input name="driver" readOnly placeholder="Select" value={values.driver} type="text" />
        </div>
        <ErrorMessage component="span" name="driver"/>
      </div>
      <button type="submit" disabled={!(dirty && isValid)}>
        Save
      </button>
    </form>
  )}
</Formik>

【讨论】：

请解释一下这段代码是如何解决问题的。
虽然我感觉按钮部分应该是：<button type="submit" disabled={dirty && !isValid)}>Save</button>

【解决方案2】：

{
  ({ errors, ...others }) => (
  ...other components
  <button type="submit" disabled={isSubmitting || Object.keys(errors).length > 0}>
    Save
  </button> )
}

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。