Question

所以我有一个表单，仅通过HTML5即可对其进行验证。

我有一些必填字段，而没有。所以我想知道我该如何处理React，以检查这些字段是否为空。

就像这样的形式：

<form className="step-three-form">
        <Container className="step-one">
          <Row>
            <Col md={{ span: 6, offset: 3 }}>
              <FormField
                type="text"
                label="First Name"
                isRequired="required"
                controlId="firstName"
                placeholder="First Name"
                onChange={e => {
                  startupThirdStepFormActionHandler({
                    firstName: e.target.value,
                  });
                }}
                value={startupThirdStepForm.firstName}
              />
              <FormField
                type="text"
                isRequired={false} // THIS IS NOT REQUIRED.
                label="Middle Name"
                controlId="middleName"
                placeholder="Middle Name"
                onChange={e =>
                  startupThirdStepFormActionHandler({
                    middleName: e.target.value,
                  })
                }
                value={startupThirdStepForm.middleName}
              />
              <div className="choose-profile-separator">
                <PrimaryButton
                  type="submit"
                  btnText="NEXT"
                  primaryBtnClasses="form-button"
                  onClick={handleNextFunctionality}
                  isDisabled={areFieldsFilledOut()}
                />
              </div>
            </Col>
          </Row>
        </Container>
      </form>

我正在使用react bootstrap，但未使用其任何验证方法。

所以我需要做的是这样的事情：

const checkFormValidation = () => {
  if (form has all of its inputs filled out) return performSomething.
}

Answer 1

不看代码其余部分就很难给出准确的答案。

这通常是我们要做的。

this.isRequireEmpty = () => {
      if (this.props.personStore.person.firstName === '') {
        return true;
      }
      return false;
    };
  }

并在单击时调用的handleNextFunctionality方法中调用isRequireEmpty。

我提到了这个this.props.personStore.person.firstName，根据您的其余代码可能有所不同。我用mobx进行状态管理。

PersonStore看起来像这样。

import {
  configure,
  observable,
  decorate,
  action,
} from 'mobx';

configure({ enforceActions: 'observed' });

class PersonStore {
  constructor() {
    this.person = {
      firstName: '', 
      Lastname: '', 
    };
    this.setPerson = (property, value) => {
      this.person[property] = value;
    };

  }

  async addPerson() {
    // some functionality to call add api
  }
}

decorate(PersonStore, {
  person: observable,
  setPerson: action,
});

export default PersonStore;

如何检查表单的所有必填字段是否已填写？

1 个答案: