如何使用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 验证。

- isherwood

---

你可以按照 https://react-bootstrap.netlify.app/components/forms/#forms-validation-native 上的描述，对一个 Form.Control 进行相关操作。 - Andrew

谢谢，但我不确定你指的是什么。我正在寻找基本的HTML5验证，而不是React验证。 - isherwood

没有仔细看，但注意到他们在 Form.Controls 和 Form.Check 中使用了 required，而后者在 Form.Group 中，还有一个使用 isValid 等的本机 html5 验证部分-说实话我没有使用过！ - Andrew

Answer 1

我和你遇到了同样的问题，其实很简单，可惜文档没有明确说明。

给它们都取相同的名称。

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

- thedoctor

---

当然，如果我想要参考它的话，它会在_HTML_文档中提到。 :) - isherwood

Answer 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：根据标志条件性地添加disabled类名。标志只在第一次执行handleChange时更新。

步骤 3：添加 CSS。

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

- Dhruvil21_04