如何制作 HTML 验证所需的 React-Bootstrap 无线电组？

Question

我在我的应用程序中使用了一对React-Bootstrap 单选按钮。 我需要要求用户做出选择。 但是，如此处所示添加required不会产生与 HTML 无线电输入相同的效果。

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

如何在此处应用 HTML5 required属性？ 我正在寻找基本的 HTML5 验证，而不是 React 验证。

Answer 1

和你有同样的问题，它实际上很简单，很遗憾他们没有在文档中指定。

给他们都起一个名字。

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

Answer 2

步骤 1：在 state 中设置标志，默认为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; 
}