代码之家 › 专栏 › 技术社区 › Reacting

当表格的所有必填字段都已填写时,如何检查?

ecmascript-6 reactjs javascript

Reacting · 技术社区 · 5 年前

所以我有一个表单,我只是用HTML5来验证它。

我有一些字段是必需的,只是没有。所以我想知道我可以做什么反应,以检查这些字段是否不是空的。

像这样的形式:

<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引导,但我没有使用它的任何验证方法。

所以我要做的是:

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

1 回复 | 直到 5 年前

Developer 5 年前

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

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

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

我提到过这个 this.props.personStore.person.firstName 根据代码的其他部分可能会有所不同。我用mobx来管理州政府。

个人商店看起来像这样。

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;