使用 Formik 的内联复选框标签

Question

如何让复选框字段上的 table 与复选框内联显示（在同一水平线上）？

                <div className="form-group">
                    <label htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link></label>
                    <Field name="consent"  type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                    <ErrorMessage name="consent" component="div" className="invalid-feedback" />
                </div>

注意 - 在我问这个问题之前，我尝试了标准 CSS。我看不到在哪里强制样式内联：

const style4 = {
    display: 'inline-block'
}

尝试在表单组上使用标准 CSS

            <div className="form-group" style={style4}  >
                <label  htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>
                <Field name="consent" type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                <ErrorMessage name="consent" component="div" className="invalid-feedback" />
            </div>

尝试在表单组标签上使用标准 CSS

<div className="form-group" >
                        <label style={style4}  htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>
                        <Field name="consent" type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                        <ErrorMessage name="consent" component="div" className="invalid-feedback" />
                    </div>

尝试在表单组字段上使用标准 CSS

<div className="form-group" >
                    <label  htmlFor="consent">You must accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>
                    <Field name="consent" style={style4} type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
                    <ErrorMessage name="consent" component="div" className="invalid-feedback" />
                </div>

Answer 1

这纯粹是一个 css 问题。将 display: inline-block 添加到要留在同一行的元素

Answer 2

如果对某人有帮助：

Form.css

.checkbox_label_wrapper {
  display: flex;
}

.checkbox-wrapper {
  display: flex;
  align-self: center;
}

.checkbox {
  width: 20px;
  height: 20px;
  margin: 0px 5px;
}

.links {
  margin: 0px 2px;
}

表单组：

<div className="form-group">
                <div className="checkbox-wrapper">
                    <Field
                      name="consent"
                      type="checkbox"
                      checked={values.consent}
                      className={
                        "checkbox" +
                        (errors.consent && touched.consent ? " is-invalid" : "")
                      }
                    />
                <label htmlFor="consent" className="checkbox_label_wrapper">
                  You must accept the{" "}
                  <Link className="links" to={"/Terms"}>
                    Terms of Use
                  </Link>{" "}
                  and{" "}
                  <Link className="links" to={"/Privacy"}>
                    Privacy Policy
                  </Link>



            </label>
            </div>

使用 Formik 的内联复选框标签

Inline checkbox label with Formik

reactjs

react-bootstrap

formik