React表单与Bootstrap Modal关联实现方法咨询

前置准备 #

确保已安装依赖并引入Bootstrap样式：

npm install react-bootstrap bootstrap

在项目入口文件（如index.js）中添加：

import 'bootstrap/dist/css/bootstrap.min.css';

修改后的完整代码 #

import React, { useState } from "react";
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

const Contact = () => {
  const [showModal, setShowModal] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [emailValue, setEmailValue] = useState("");
  const [phoneNumberValue, setPhoneValue] = useState("");
  const [countryValue, setCountryValue] = useState("");

  // 关闭Modal的方法
  const handleCloseModal = () => setShowModal(false);

  const buttonOnClick = () => {
    // 验证必填字段
    if (inputValue === "" || emailValue === "" || phoneNumberValue === "") {
      setShowModal(false);
      return;
    }

    // 验证通过，显示Modal并清空所有表单值
    setShowModal(true);
    setInputValue("");
    setEmailValue("");
    setPhoneValue("");
    setCountryValue("");
  };

  return (
    <div className="main">
      <form>
        <div className="baslik">
          <div className="container center">
            <h1>Contact Form</h1>
          </div>
        </div>
        <div className="field">
          <label className="text"> Name And Surname: </label>
          <input 
            type="text" 
            className="form" 
            placeholder="Kerem Kurt" 
            required 
            value={inputValue} 
            onChange={(e) => setInputValue(e.target.value)} 
          />
        </div>

        <div className="field">
          <label className="text"> E-mail: </label>
          <input 
            type="email" 
            className="form" 
            placeholder="udenditfy@gmail.com" 
            required 
            value={emailValue} 
            onChange={(e) => setEmailValue(e.target.value)} 
          />
        </div>

        <div className="field">
          <label className="text"> Phone Number: </label>
          <input 
            type="tel" 
            className="form" 
            pattern="[0-9]*" 
            placeholder="+905373199437" 
            required 
            value={phoneNumberValue} 
            onChange={(e) => setPhoneValue(e.target.value)} 
          />
        </div>

        <div className="field">
          <label className="text"> Country: </label>
          <select 
            className="form" 
            placeholder="Turkiye" 
            required 
            value={countryValue} 
            onChange={(e) => setCountryValue(e.target.value)}
          >
            <option value="Turkiye">Turkiye</option>
            <option value="Azerbaijan">Azerbaijan</option>
            <option value="Japan">Japan</option>
            <option value="Serbia">Serbia</option>
            <option value="France">France</option>
          </select>
        </div>

        <button type="button" className="button" onClick={buttonOnClick}> Enter </button>
      </form>

      {/* 整合Bootstrap Modal */}
      <Modal
        show={showModal}
        onHide={handleCloseModal}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>表单提交成功</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          你的信息已成功提交，感谢你的填写！
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            关闭
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default Contact;

关键修改说明 #

• 状态复用：直接使用已有的showModal状态控制Modal的显示/隐藏，无需额外声明show状态
• 组件整合：将Modal组件直接嵌入Contact组件中，确保状态能直接共享
• 完善逻辑：表单验证通过后，清空所有输入字段（原代码仅清空了姓名）
• Modal配置：绑定show属性为showModal，onHide绑定关闭方法，保持静态 backdrop 和禁用键盘关闭的特性

内容的提问来源于stack exchange，提问作者ŞehzadeEren