перекрытие полей ввода в макете

Question

Я хотел создать форму с текстовым полем, возрастом, страной и полом. однако, похоже, есть проблема. Поле возраста и пола, похоже, накладывается друг на друга. Как сделать так, чтобы каждое поле ввода было в отдельной строке вместо того, чтобы перекрывать

codeandbox, проблема возникает только тогда, когда вы полностью открываете веб-сайт

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;

Answer 1

Вам необходимо сначала удалить атрибуты as = {Row} из групп форм Age и Gender, так как это не тот вариант использования, которого вы пытаетесь достичь. В компонента возрастной группы не используется должным образом.

После внесения этих изменений все работало нормально. Вот фрагмент

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;

Answer 2

Самым простым решением является удаление as={Row} из <Form.Group 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 />. Решение, которое вы выберете, зависит от ожидаемого макета.