在某些形式字段上，反应最终触发触发验证

Question

我想在某些动作上验证特定字段。

我有一个带有多个字段的表单和内部形式，有一个包含4个字段的部分和一个单独的按钮，例如Test connection。因此，按下该按钮时，我想发送一个API调用，但是在此之前，我想在这些特定字段上显示验证错误。我找不到这样做的方法。如果你们知道，请告诉我。预先感谢。

<Form
        onSubmit={handleSubmit}
        initialValues={initData}
        render={({
          handleSubmit,
          form,
          submitting,
          pristine,
          values,
        }) => {
          return (
            <form onSubmit={handleSubmit}>
              <div className="form-body">
                <h2>New Data Source</h2>
                <FormGroup>
                  <Label for="name" sm={3}>
                    Name
                  </Label>
                  <Col sm={6}>
                    <Field
                      name="name"
                      placeholder="Name"
                      innerRef={dataSourceNameRef}
                      aria-label="name"
                      component={FormInput}
                      validate={composeValidators(isRequired)}
                    />
                  </Col>
                </FormGroup>
        
                <div className="grey">
                  <Row>
                    <Col xs={12} sm={6} md={4}>
                      <FormGroup>
                        <Label for="name">Hostname</Label>
                        <Field
                          name="hostname"
                          placeholder="Hostname"
                          aria-label="hostname"
                          component={FormInput}
                          validate={composeValidators(isRequired)}
                        />
                      </FormGroup>
                    </Col>
                    <Col xs={12} sm={5} md={2}>
                      <FormGroup>
                        <Label for="port">Port</Label>
                        <Field
                          name="port"
                          placeholder="Port"
                          aria-label="port"
                          component={FormInput}
                          validate={isRequired}
                        />
                      </FormGroup>
                    </Col>
                  </Row>
                  <Row>
                    <Col xs={12} sm={6} md={4}>
                      <FormGroup>
                        <Label for="name">Username</Label>
                        <Field
                          name="username"
                          placeholder="Username"
                          aria-label="name"
                          component={FormInput}
                          validate={isRequired}
                        />
                      </FormGroup>
                    </Col>
                  </Row>
                  <Row>
                    <Col xs={12} sm={6} md={4}>
                      <FormGroup>
                        <Label for="name">Password</Label>
                        <Field
                          name="password"
                          placeholder="Password"
                          aria-label="password"
                          type={values.showPassword ? 'text' : 'password'}
                          component={FormInput}
                          validate={composeValidators(isRequired)}
                        />
                      </FormGroup>
                    </Col>
                    <Col xs={12} sm={6} md={4} className="checkbox-field">
                      <Field
                        name="showPassword"
                        aria-label="show password"
                        component={FormInput}
                        type="checkbox"
                        label="Show Password"
                      />
                      <Label for="name"> Show Password</Label>
                    </Col>
                  </Row>
                  <Field
                    name="testConnection"
                    validateFields={['username', 'hostname', 'password']}
                    component={() => (
                      <Button
                        color="secondary"
                        onClick={() => testConnection(values)}
                      >
                        Test Connection
                      </Button>
                    )}
                  />
                </div>
              </div>
              <div className="form-footer justify-right">
                <Button
                  type="submit"
                  disabled={submitting || pristine}
                  color="primary"
                >
                  Create
                </Button>
              </div>
            </form>
          );
        }}
      />

Answer 1

基本上，您只需要运行验证，只有在验证通过时才运行API调用。下面有一个示例，但是如果您可以共享您的代码来帮助他人了解您的位置，那就太好了。

const handleCick = () => {
  if (invalid) {
    setInvalidPopup(true);
    return;
  }
  //fetch...
};