布局中重叠的输入字段答案

【问题标题】：input fields overlapping in layout布局中重叠的输入字段
【发布时间】：2020-11-22 19:30:39
【问题描述】：

我想创建一个包含文本字段、年龄、国家和性别的表单。但是似乎有问题。年龄和性别字段似乎相互重叠。如何让每个输入字段都在它自己的行中而不是重叠

codesandbox, the problem seems to be there only when you open the website in full

import React, { Fragment, useState } from "react";

import { Container, Row, Col, Form } from "react-bootstrap";
import {
  CountryDropdown,
  RegionDropdown,
  CountryRegionData
} from "react-country-region-selector";

const App = () => {
  const [age, setAge] = useState("");
  const [gender, setGender] = useState("");
  const [country, setCountry] = useState("");
  const [text, setText] = useState("");
  const handleSubmit = async () => {
    console.log(age, gender, country, text);
  };
  return (
    <Fragment>
      <Container>
        <Row md={4}>
          <Col xs={12} md={7}>
            <Form.Group controlId="textarea">
              <Form.Label />
              <Form.Control
                as="textarea"
                rows="20"
                onChange={e => setText(e.target.value)}
                placeholder="Enter you text"
              />
            </Form.Group>
          </Col>
          <Col xs={12} md={5}>
            <Form className="mb-3">
              <Form.Row>
                <Form.Group as={Row}>
                  <Form.Label>
                    Age
                    <Form.Control
                      type="text"
                      name="age"
                      value={age}
                      onChange={e => setAge(e.target.value)}
                      required
                    />
                  </Form.Label>
                </Form.Group>

                <br />
                <Form.Group controlId="exampleForm.SelectCustomSizeSm" as={Row}>
                  <Form.Label>Gender</Form.Label>
                  <Form.Control
                    as="select"
                    size="sm"
                    custom
                    value={gender}
                    onChange={e => setGender(e.target.value)}
                  >
                    <option>Male</option>
                    <option>Female</option>
                    <option>Prefer Not To Say</option>
                  </Form.Control>
                </Form.Group>
                <Form.Group>
                  <Form.Label>
                    Country
                    <CountryDropdown
                      value={country}
                      onChange={e => setCountry(e)}
                    />
                  </Form.Label>
                </Form.Group>
              </Form.Row>
            </Form>
            <Form.Group as={Col}>
              <input
                type="submit"
                className="btn btn-dark my-1"
                value="Submit"
                onClick={handleSubmit}
              />
            </Form.Group>
          </Col>
        </Row>
      </Container>
    </Fragment>
  );
};

export default App;

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案1】：

您需要首先从 Age 和 Gender 表单组中删除 as={Row} 属性，因为它不是您想要实现的用例。年龄表单组组件的

使用不当。

进行这些更改后，它运行良好。这是一个sn-p

import React, { Fragment, useState } from "react";

import { Container, Row, Col, Form } from "react-bootstrap";
import {
  CountryDropdown,
  RegionDropdown,
  CountryRegionData
} from "react-country-region-selector";

const App = () => {
  const [age, setAge] = useState("");
  const [gender, setGender] = useState("");
  const [country, setCountry] = useState("");
  const [text, setText] = useState("");
  const handleSubmit = async () => {
    console.log(age, gender, country, text);
  };
  return (
    <Fragment>
      <Container>
        <Row md={4}>
          <Col xs={12} md={7}>
            <Form.Group controlId="textarea">
              <Form.Label />
              <Form.Control
                as="textarea"
                rows="20"
                onChange={e => setText(e.target.value)}
                placeholder="Enter you text"
              />
            </Form.Group>
          </Col>
          <Col xs={12} md={5}>
            <Form className="mb-3">
              <Form.Row>
                <Form.Group>
                  <Form.Label>
                    Age
                  </Form.Label>
                    <Form.Control
                      type="text"
                      name="age"
                      value={age}
                      onChange={e => setAge(e.target.value)}
                      required
                    />
                </Form.Group>

                <br />
                <Form.Group controlId="exampleForm.SelectCustomSizeSm">
                  <Form.Label>Gender</Form.Label>
                  <Form.Control
                    as="select"
                    size="sm"
                    custom
                    value={gender}
                    onChange={e => setGender(e.target.value)}
                  >
                    <option>Male</option>
                    <option>Female</option>
                    <option>Prefer Not To Say</option>
                  </Form.Control>
                </Form.Group>
                <Form.Group>
                  <Form.Label>
                    Country
                    <CountryDropdown
                      value={country}
                      onChange={e => setCountry(e)}
                    />
                  </Form.Label>
                </Form.Group>
              </Form.Row>
            </Form>
            <Form.Group as={Col}>
              <input
                type="submit"
                className="btn btn-dark my-1"
                value="Submit"
                onClick={handleSubmit}
              />
            </Form.Group>
          </Col>
        </Row>
      </Container>
    </Fragment>
  );
};

export default App;

【讨论】：

【解决方案2】：

最简单的解决方案是从<Form.Group as={Row}> 中删除as={Row}。

<Container>
  <Row md={4}>
    <Col xs={12} md={7}>
      {/* ... */}
    </Col>
    <Col xs={12} md={5}>
      <Form className="mb-3">
        <Form.Row>
          {/* <Form.Group as={Row}> */}
          <Form.Group>
            <Form.Label>
              Age
              <Form.Control type="text" name="age" required />
            </Form.Label>
          </Form.Group>

          <br />

          {/* <Form.Group controlId="exampleForm.SelectCustomSizeSm" as={Row}> */}
          <Form.Group controlId="exampleForm.SelectCustomSizeSm">
            <Form.Label>Gender</Form.Label>
            <Form.Control as="select" size="sm" custom>
              <option>Male</option>
              <option>Female</option>
              <option>Prefer Not To Say</option>
            </Form.Control>
          </Form.Group>
          <Form.Group>{/* ... */}</Form.Group>
        </Form.Row>
      </Form>
      <Form.Group as={Col}>{/* ... */}</Form.Group>
    </Col>
  </Row>
</Container>

或者，您可以完全删除 <Form.Row />。您选择的解决方案取决于您期望的布局。

【讨论】：