解决React中按钮点击不显示弹出表单的问题

import React, { useState } from 'react'; // 导入 useState 钩子
import './App.css'; // 假设 App.css 存在且包含样式

const InventoryManager = () => {
  // 状态：控制弹出表单的显示/隐藏
  const [showPopup, setShowPopup] = useState(false);

  // 状态：管理表单输入字段的值
  const [itemName, setItemName] = useState('');
  const [itemDescription, setItemDescription] = useState('');
  const [itemPrice, setItemPrice] = useState('');
  const [itemImage, setItemImage] = useState('');

  // 模拟一个 addItem 函数，实际应用中可能通过 props 传入或 Context 获取
  const addItem = (item) => {
    console.log('Adding item:', item);
    // 实际的添加逻辑，例如发送API请求或更新全局状态
  };

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    const newItem = {
      name: itemName,
      description: itemDescription,
      price: itemPrice,
      image: itemImage,
    };
    addItem(newItem); // 调用 addItem 函数

    // 重置输入字段
    setItemName('');
    setItemDescription('');
    setItemPrice('');
    setItemImage('');

    // 关闭弹出表单
    setShowPopup(false);
  };

  // 清空表单字段
  const handleClearForm = () => {
    setItemName('');
    setItemDescription('');
    setItemPrice('');
    setItemImage('');
  };

  return (
    <div>
      <h1>Inventory Manager</h1>

      <div id="buttons">
        {/* 点击按钮时，设置 showPopup 为 true 以显示弹出表单 */}
        <button onClick={() => setShowPopup(true)}>Add Item</button>
      </div>

      {/* 条件渲染：当 showPopup 为 true 时显示弹出表单 */}
      {showPopup && (
        <div id="add-item-popup" className="popup-overlay"> {/* 添加一个 overlay 样式 */}
          <div className="popup-content"> {/* 弹出内容容器 */}
            <div id="popup-header">
              <h2>Add Item</h2>
              {/* 点击关闭按钮时，设置 showPopup 为 false 以隐藏弹出表单 */}
              <button id="close-button" onClick={() => setShowPopup(false)}>
                X
              </button>
            </div>
            {/* 表单开始 */}
            <form onSubmit={handleSubmit}>
              <div className="form-group">
                <label htmlFor="itemName">Item Name:</label>
                <input
                  type="text"
                  id="itemName"
                  value={itemName}
                  onChange={(e) => setItemName(e.target.value)}
                  required
                />
              </div>
              <div className="form-group">
                <label htmlFor="itemDescription">Description:</label>
                <input
                  type="text"
                  id="itemDescription"
                  value={itemDescription}
                  onChange={(e) => setItemDescription(e.target.value)}
                  required
                />
              </div>
              <div className="form-group">
                <label htmlFor="itemPrice">Price:</label>
                <input
                  type="number" // 使用 number 类型
                  id="itemPrice"
                  value={itemPrice}
                  onChange={(e) => setItemPrice(e.target.value)}
                  required
                />
              </div>
              <div className="form-group">
                <label htmlFor="itemImage">Image URL:</label>
                <input
                  type="text"
                  id="itemImage"
                  value={itemImage}
                  onChange={(e) => setItemImage(e.target.value)}
                />
              </div>
              <div className="form-actions">
                <button type="submit">Add Item</button>
                <button type="button" onClick={handleClearForm}>Clear Form</button>
              </div>
            </form>
            {/* 表单结束 */}
          </div>
        </div>
      )}

      <div id="inventory-gallery">{/* Render inventory items here */}</div>
    </div>
  );
};

export default InventoryManager;

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保在其他内容之上 */
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  position: relative;
}

#popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

#close-button {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #666;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: calc(100% - 20px); /* 减去 padding */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.form-actions button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}

.form-actions button[type="submit"] {
  background-color: #007bff;
  color: white;
}

.form-actions button[type="button"] {
  background-color: #6c757d;
  color: white;
}