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

Question

我的项目的单选按钮有问题。选中的单选框是基于变量users.gender的。当我对我的users.gend进行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中，最终没有任何标签组件的结束标记。

这是更新后的代码

<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>

你可以参考这个沙箱链接来检查正确的行为。忽略我代码中的icons元素，因为包的原因我已经删除了它。