reactjs - 单选按钮如何在反应索环中按行顺序（男性和女性）？

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>