在 React 中单击关闭按钮后 Boostrap 模式仍然保留

Question

当我单击“创建故事”按钮时，它会显示登录表单，成功登录后，会显示“创建故事表单”组件，但在尝试关闭模式时，它无法正常工作，因为仍然存在阴影。 我使用 useEffect 来显示模态框，问题是当我尝试使用 Javascript 关闭模态框时，单击模态框的关闭按钮后，它不起作用。

难得的是，模态框可以正确关闭（问题已解决），并进行以下更改：

• 将关闭按钮放在表单标签内
• 删除类型='按钮'
• 删除onClick

有效

          <div className="modal-header">
            <h2>Create Your Story</h2>
            <form>
              <button className="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
            </form>
          </div>

不起作用

          <div className="modal-header">
            <h2>Create Your Story</h2>
            <button type="button" className="btn-close" data-bs-dismiss="modal" onClick={() => props.setShowModal(false)}></button>
          </div>

请检查完整项目的链接https://github.com/Technyen/StoriesApp/tree/main/Frontend

识别模态

import { useState } from 'react';
import LoginForm from './LoginForm';

export default function IdentificationModal(props) {
  const [isUserRegistered, setIsUserRegistered] = useState(true);

  return (
      <>
        {
            <LoginForm setShowModal={props.setShowModal} setIsUserRegistered={setIsUserRegistered} setIsUserIdentified={props.setIsUserIdentified} />
        }
      </>
  );
}

创建故事

import CreateStoriesModal from "./CreateStoriesModal";
import IdentificationModal from "./IdentificationModal";
import { useState } from 'react';

function CreateStory(props) {
  const [showModal, setShowModal] = useState(false)

  return (
    <>
      <div className="d-grid gap-2 col-2 mx-auto">
        <button type="button" className="btn btn-primary mt-3" onClick={() => setShowModal(true)}>Create stories</button>
      </div>
      {
        showModal ?
          props.isUserIndentified ?
            <CreateStoriesModal setShowModal={setShowModal}/>
            : <IdentificationModal setShowModal={setShowModal} setIsUserIdentified={props.setIsUserIdentified} />
          : null
      }
    </>
  )
}

export default CreateStory

登录表格

import { useState, useEffect } from 'react';
import { loginUser } from '../Services/userService';
import { useForm } from "react-hook-form";
import { Modal } from 'bootstrap';

function LoginForm(props) {
  const [email, setEmail] = useState('')
  const [loginResult, setLoginResult] = useState('')
  const { handleSubmit, register, formState: { errors } } = useForm();

  useEffect(() => {
    const identificationModal = new Modal('#identificationModal');
    identificationModal.show();
  }, [])

  async function handleLogin() {
    var result = await loginUser(email);
    setLoginResult(result);
    if (result === null) {
      const identificationModal = new Modal('#identificationModal');
      identificationModal.hide();
      props.setIsUserIdentified(true);
    }
  }

  return (
    <div className="modal fade" id="identificationModal" tabIndex="-1">
      <div className="modal-dialog">
        <div className="modal-content" >
          <div className="modal-header">
            <h1>Log In</h1>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={() => props.setShowModal(false)}></button>
          </div>
          <div className="modal-body">
            <form onSubmit={handleSubmit(handleLogin)}>
              <input
                type="email" className='form-label' placeholder='Email'
                value={email} onChange={e => setEmail(e.target.value)} />

              <br></br><button className="btn btn-primary mt-2" type="submit">Login</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LoginForm

创建故事模式

import { useState, useEffect } from 'react';
import { Modal } from "bootstrap";
import { createStory } from '../Services/storyService';
import { useForm } from "react-hook-form";

function CreateStoriesModal(props) {
  const [description, setDescription] = useState('')
  const [createResult, setCreateResult] = useState('')
  const { handleSubmit, register, formState: { errors } } = useForm();

  useEffect(() => {
    const createStoriesModal = new Modal('#createStoriesModal');
    createStoriesModal.show();
  }, [])

  async function handleCreate() {
    var result = await createStory(title, category, ageAppropiate, description);
    setCreateResult(result);
  }

  return (
    <div className="modal fade" id="createStoriesModal" tabIndex="-1">
      <div className="modal-dialog modal-lg">
        {
            <div className="modal-content">
              <div className="modal-header">
                <h2>Create Your Story</h2>
                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={() => props.setShowModal(false)}></button>
              </div>

              <div className="modal-body">
                <form onSubmit={handleSubmit(handleCreate)}>
                  <textarea type="text" className="form-control" placeholder="Write your story here" id="floatingTextarea"  {...register("description", { required: " This field is required. " })} value={description} onChange={e => setDescription(e.target.value)}
                  />
                  <span className="text-danger">{errors.description && errors.description.message}</span><br></br>
                  <button className="btn btn-primary mb-3" type="submit">Create</button>
                </form>
              </div>
            </div>
        }
      </div>
    </div>
  );
}

Answer 1

你可以只使用 useState 变量来显示模态表单而不是使用 javascript