Переключатель не обновляет sh сразу, когда я нажимаю на него - PullRequest
Новая
       17

Переключатель не обновляет sh сразу, когда я нажимаю на него

0 голосов
/ 15 апреля 2020

У меня проблема с переключателем для моего проекта. проверенное радио основано на переменной users.gender. Когда я делаю console.log из моего users.gender, я вижу, что когда я нажимаю на мужской или женский, значение меняется, но не проверенное радио, и я не знаю почему. Я читал в Интернете, и некоторые люди говорят, что это из-за protectDefault, но у меня его нет. Вот часть моего кода: 

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>
      </>
    );
  }

Заранее спасибо!

1 Ответ

1 голос
/ 15 апреля 2020

Я только что воспроизвел ваш точный код в песочнице.

Я не вижу никаких ошибок в функции 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>

Вы можете обратиться к этой песочнице ссылка , чтобы проверить правильность поведения. Проигнорируйте элемент icons в моем коде, я удалил его из-за пакета.

...