Question

我的项目的单选按钮有问题。检查的单选基于变量users.gender。当我对我的users.gender执行console.log时，我可以看到单击男性或女性时，值正在变化，但选中的单选按钮并没有变化，我也不知道为什么。我在网上阅读过，有人说这是因为preventDefault，但是我没有。这是我的代码的一部分：

import React, { useState } from 'react';
import {Modal, Button, Form, Row, Col, Tab, Tabs} from 'react-bootstrap';
import * as Icon from 'react-bootstrap-icons';

export default function Modalregisterlogin(props) {

    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const [users, setUsers] = useState({
     gender: "",
    });


    const display = e => {
      console.log(users.gender);

    };

    return (
      <>
        <Button variant="primary" onClick={handleShow}>
         {props.page}
        </Button>

        <Modal show={show} onHide={handleClose} size="lg">
          <Modal.Body className="modalcontent" > 
            <Icon.X size={30} className="modalclose" onClick={handleClose}/>
          <Tabs defaultActiveKey={props.tab} id="test">
              <Tab eventKey="register" title="INSCRIPTION">
                  <Form >
                    <Form.Group  as={Row} >
                      <Form.Label column md="3">Genre: {users.gender}</Form.Label> 
                      <Col md="9">
                        <Form.Check 
                          name="gender" 
                          value="male" 
                          inline 
                          checked={users.gender === "male"}
                          label="Male" 
                          type='radio' 
                          onChange={e => setUsers({ gender : 'male'})}/>
                        <Form.Check 
                          name="gender" 
                          value="female" 
                          inline 
                          checked={users.gender === "female"}
                          label="Female" 
                          type='radio' 
                          onChange={e => setUsers({ gender : 'female'})}/>
                     </Col>
                     </Form.Group>  
                </Form>
                <Button variant="primary" type="submit" onClick={display}>
                  Show gender value
                </Button>
              </Tab>

              <Tab eventKey="login" title="CONNEXION">

                <Button variant="primary" type="submit" onClick={handleClose}>
              Se connecter
            </Button>
              </Tab>
          </Modal.Body>

        </Modal>
      </>
    );
  }

提前谢谢！

Answer 1

我只是在沙盒上复制了您的确切代码。

在useState函数中没有看到任何错误，该错误似乎出在JSX中，最后您没有Tabs组件的任何结束标记。

这是更新的代码

<React.Fragment>
  <Button variant="primary" onClick={handleShow}>
    {props.page}
  </Button>

  <Modal show={show} onHide={handleClose} size="lg">
    <Modal.Body className="modalcontent">
      <Tabs defaultActiveKey={props.tab} id="test">
        <Tab eventKey="register" title="INSCRIPTION">
          <Form>
            <Form.Group as={Row}>
              <Form.Label column md="3">
                Genre: {users.gender}
              </Form.Label>
              <Col md="9">
                <Form.Check
                  name="gender"
                  value="male"
                  inline
                  checked={users.gender === "male"}
                  label="Male"
                  type="radio"
                  onChange={e => setUsers({ gender: "male" })}
                />
                <Form.Check
                  name="gender"
                  value="female"
                  inline
                  checked={users.gender === "female"}
                  label="Female"
                  type="radio"
                  onChange={e => setUsers({ gender: "female" })}
                />
              </Col>
            </Form.Group>
          </Form>
          <Button variant="primary" type="submit" onClick={display}>
            Show gender value
          </Button>
        </Tab>

        <Tab eventKey="login" title="CONNEXION">
          <Button variant="primary" type="submit" onClick={handleClose}>
            Se connecter
          </Button>
        </Tab>
      </Tabs>
    </Modal.Body>
  </Modal>
</React.Fragment>

您可以参考此沙盒link来检查正确的行为。忽略代码中的icons元素，由于软件包的缘故，我将其删除。

单击单选按钮时不会立即刷新

1 个答案: