Как я могу сделать группу радиосвязи React-Bootstrap обязательной с проверкой HTML?

#html #radio-button #react-bootstrap #radio-group

#HTML #переключатель #react-bootstrap #группа радиосвязи

Вопрос:

Я использую пару переключателей React-Bootstrap в своем приложении. Мне нужно потребовать, чтобы пользователь сделал выбор. Однако добавление, required как показано здесь, не имеет того эффекта, который был бы на радиовходе HTML.

 <Form.Check inline label="One" type='radio' required />
<Form.Check inline label="Two" type='radio' required />

Как я могу применить здесь атрибут HTML5 required ? Я ищу базовую проверку HTML5, а не проверку React.

1. Вы можете сделать это в Form.Control в соответствии с react-bootstrap.netlify.app/components /forms / …

2. Спасибо, но я не уверен, к чему вы меня там подводите. Я ищу базовую проверку HTML5, а не проверку React.

3. Не смотрел на это так внимательно, но заметил, что они использовали required с Form.Controls и Form. Проверьте, но последняя была в Form.Group, там также есть собственный раздел проверки html5 с использованием isValid и т.д. — Честно говоря, не использовал это!

Ответ №1:

У меня была та же проблема, что и у вас, на самом деле это очень просто, и жаль, что они не указывают в документации.

Дайте им всем одинаковое имя.

 
<Form.Check name="grouped" required inline label="One" type='radio' />
<Form.Check name="grouped" required inline label="Two" type='radio' />

Ответ №2:

Шаг 1: Установите флаг в состояние, по умолчанию равное true

 class HaveAccount extends Component {
  state = {
    flag: true,
  };
  render() {
    const { haveAccount, updateHaveAccount } = this.props;
    const handleChange = (e) => {
      if (this.state.flag)
        this.setState((prevState) => ({ ...prevState, flag: false }));
      updateHaveAccount({ value: e.target.value });
    };
    return (
        <div>
          <Form className="d-flex flex-column justify-content-center">
            <Form.Group as={Row}>
              <Col sm={{ span: 7, offset: 5 }}>
                <Form.Check
                  type="radio"
                  label="YES"
                  name="haveAccountRadios"
                  value={true}
                  id="haveAccountRadios1"
                  onChange={handleChange}
                />
                <Form.Check
                  type="radio"
                  label="NOPE"
                  name="haveAccountRadios"
                  value={false}
                  id="haveAccountRadios2"
                  onChange={handleChange}
                />
              </Col>
            </Form.Group>
            <Form.Group className="d-flex justify-content-center">
              <Link
                className={`button button-link ${
                  this.state.flag ? "disabled" : ""
                }`}
                to="/login"
              >
                Next
              </Link>
            </Form.Group>
          </Form>
        </div>
    );
  }
}

Шаг 2: Я условно добавляю className disabled на основе флага. Флаг обновляется только при первом handleChange выполнении.

Шаг 3: Добавьте CSS

 .disabled {   
  background-color: #ccc;
  pointer-events: none; 
}