我怎样才能使 HTML 验证需要 React-Bootstrap 无线电组？

Question

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

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

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

Answer 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; 
}

Answer 2

和你有同样的问题，其实很简单，很遗憾他们没有在文档中说明。

给他们一个相同的名字。


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

我怎样才能使 HTML 验证需要 React-Bootstrap 无线电组？

How can I make a React-Bootstrap radio group required with HTML validation?

html

radio-group

radio-button

react-bootstrap