Как переключатель должен быть в порядке строк (мужской и женский) в ответной втулке?

Question

введите описание изображения здесь

Цитата

Answer 1

Если вы используете React-bootstrap, вы должны сначала импортировать следующие компоненты, как показано ниже.

import { Modal, Button, DropdownButton, Row, Col } from "react-bootstrap";

А затем в методе рендеринга вы можете заменить код, как показано ниже.

    <label>SEX</label>
    <br />
    <Row>
      <Col xs={1}>Male</Col>
      <Col xs={2}>
        <input
          defaultValue="0"
          style={{ width: "100%" }}
          type="radio"
          name="gender"
          onChange={this.props.handleGenderChange}
          defaultChecked={this.props.gender == 0}
        />
      </Col>
    </Row>
    <Row>
      <Col xs={1}>Female</Col>
      <Col xs={2}>
        <input
          defaultValue="1"
          style={{ width: "100%" }}
          type="radio"
          name="gender"
          onChange={this.props.handleGenderChange}
          defaultChecked={this.props.gender == 1}
        />
      </Col>
    </Row>