解决React中按钮点击不显示弹出表单的问题：状态管理与语法修正

import React, { useState } from 'react'; // 确保导入 useState

const InventoryManager = () => {
  // 声明 showPopup 状态，初始值为 false (不显示弹出表单)
  const [showPopup, setShowPopup] = useState(false);
  // 声明其他输入字段的状态
  const [itemName, setItemName] = useState('');
  const [itemDescription, setItemDescription] = useState('');
  const [itemPrice, setItemPrice] = useState('');
  const [itemImage, setItemImage] = useState('');

  // ... 其他代码
};

import React, { useState } from 'react';
import './App.css'; // 假设您有相应的CSS文件

const InventoryManager = () => {
  // 状态：控制弹出表单的显示/隐藏
  const [showPopup, setShowPopup] = useState(false);
  // 状态：管理表单输入字段的值
  const [itemName, setItemName] = useState('');
  const [itemDescription, setItemDescription] = useState('');
  const [itemPrice, setItemPrice] = useState('');
  const [itemImage, setItemImage] = useState('');

  // 模拟添加新项目的逻辑 (这里只是清空表单并关闭弹窗)
  const handleAddItem = () => {
    // 实际应用中，这里会包含将新项目添加到库存的逻辑，
    // 例如调用 API 或更新全局状态
    console.log('Adding item:', { itemName, itemDescription, itemPrice, itemImage });

    // 清空输入字段
    setItemName('');
    setItemDescription('');
    setItemPrice('');
    setItemImage('');

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

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

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

      <div id="buttons">
        <button onClick={() => setShowPopup(true)}>Add Item</button>
      </div>

      {/* 条件渲染：当 showPopup 为 true 时显示弹出表单 */}
      {showPopup && (
        <div id="add-item-popup">
          <div id="popup-header">
            <h2>Add Item</h2>
            <button id="close-button" onClick={() => setShowPopup(false)}>
              X
            </button>
          </div>
          <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
            {/* 输入字段 */}
            <div>
              <label htmlFor="itemName">Item Name:</label>
              <input
                id="itemName"
                type="text"
                value={itemName}
                onChange={(e) => setItemName(e.target.value)}
                required
              />
            </div>
            <div>
              <label htmlFor="itemDescription">Description:</label>
              <textarea
                id="itemDescription"
                value={itemDescription}
                onChange={(e) => setItemDescription(e.target.value)}
              />
            </div>
            <div>
              <label htmlFor="itemPrice">Price:</label>
              <input
                id="itemPrice"
                type="number"
                value={itemPrice}
                onChange={(e) => setItemPrice(e.target.value)}
                required
              />
            </div>
            <div>
              <label htmlFor="itemImage">Image URL:</label>
              <input
                id="itemImage"
                type="text"
                value={itemImage}
                onChange={(e) => setItemImage(e.target.value)}
              />
            </div>

            <div id="form-actions">
              <button type="submit">Save Item</button>
              <button type="button" onClick={handleClearForm}>Clear Form</button>
            </div>
          </form>
        </div>
      )}

      <div id="inventory-gallery">
        {/* 这里可以渲染库存物品列表 */}
        <p>Inventory items will be displayed here.</p>
      </div>
    </div>
  );
};

export default InventoryManager;