Add item按鈕應該觸發一個帶有輸入字段的彈出表單,但是該表單沒有呈現。它在渲染時顯示空白頁,只需按鈕。
import './App.css';
const InventoryManager = () => {
dispatch(addItem(newItem));
// Reset the input fields
setItemName('');
setItemDescription('');
setItemPrice('');
setItemImage('');
// Close the popup form
setShowPopup(false);
};
const handleClearForm = () => {
// Clear the input fields
setItemName('');
setItemDescription('');
setItemPrice('');
setItemImage('');
};
return (
<div>
<h1>Inventory Manager</h1>
<div id="buttons">
<button onClick={() => setShowPopup(true)}>Add Item</button>
</div>
{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>
</div>
)}
<div id="inventory-gallery">{/* Render inventory items here */}</div>
</div>
);
};
export default InventoryManager;
嘗試在單個文件和不同的組件文件中實現,但表單仍然無法呈現。
# # #首先,你的文件格式不正確。例如,第15行中有額外括號。另一方面,您在代碼中使用了未定義的函數,例如函數dispatch和setItemName。我推薦閱讀關于鉤子的React官方文檔。