Question

我正在使用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>

Answer 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>

Answer 2

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

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

2 个答案: