Как проверить, что флажок отмечен в пакете rc-forms?

Question

Когда пользователь регистрируется, я хотел бы проверить, что TOS (Условия обслуживания) были прочитаны и приняты.Для этого в моих формах есть флажок «Я принимаю TOS»

Я использую rc-form package , чтобы проверить мои формы реакционной ленты, но я не нашел, как проверить (через rc-форму), что флажок установлен.Есть ли решение, использующее rc-форму, чтобы избежать ручных тестов?

В этом примере tosErrors остается пустым, даже если флажок TOS не установлен

onSubmit(e) {
  e.preventDefault();

  this.props.form.validateFields((error) => {
    if (!error) {
      const { register } = this.props;
      const { email, password, read } = this.state;

      //HERE IS A MANUAL TEST BECAUSE rules on checkbox are not working
      if (read) {
        register(email, password);
      }
    }
  });
}

render() {
  //...some code was removed because unuseful for stackoverflow question...
  const { getFieldProps, getFieldError, getFieldValue } = this.props.form;
  const tosErrors= getFieldError("read");

  return (
    <Form onSubmit={this.onSubmit}>
      //... some form elements ...
      <FormGroup check>
        <Col sm={{ size: 8, offset: 4 }}>
          <Label check>
            <Input
              type="checkbox"
              name="read"
              id="read"
              className={tosErrors ? "is-invalid" : ""}
              {...getFieldProps("read", {
                initialValue: read,
                rules:[{"required":true}], <==== THE RULES
                onChange,
                valuePropName: "checked"
              })}
            />
          </Label>
          // BELOW THIS IS ONE OF MY MANUAL TEST because tosErrors stay empty
          {getFieldValue("read") || <HelpBlock color={"danger"}>{t("validators:accept cgu")}</HelpBlock>}
        </Col>
      </FormGroup>
      ... SOME OTHER FORM ELEMENTS
    </Form>
}

rc-form использует пакет асинхронный валидатор пакет

Answer 1

Добавьте функцию валидатора к вашему компоненту до render():

checkIsChecked = (rule, value, callback) => {
    if (value === false) {
        callback("You should agree with Terms of Service!");
    } else {
        callback();
    }
}

И затем добавьте валидатор с этой функцией в rules:

rules: [{ required: true }, {
    validator: this.checkIsChecked,
}],

Надеюсь, это поможет.