function InventoryList({ data }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto mt-5", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full border-collapse", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, "ロットNo"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "数量"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, data.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "bg-white", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, row.lotNumber), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", name: `quantity${index}`, value: row.quantity, onChange: (e)=>row.onQuantityChange(e, index), __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }))))))); } function InventoryListStory() { const sampleData = [ { lotNumber: '12345', quantity: 10, onQuantityChange: handleQuantityChange }, { lotNumber: '67890', quantity: 20, onQuantityChange: handleQuantityChange } ]; function handleQuantityChange(event, index) { const value = event.target.value; sampleData[index].quantity = value; console.log(sampleData); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InventoryList, { data: sampleData, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const sampleData = [ { lotNumber: '12345', quantity: 10, onQuantityChange: handleQuantityChange }, { lotNumber: '67890', quantity: 20, onQuantityChange: handleQuantityChange } ]; function handleQuantityChange(event, index) { const value = event.target.value; sampleData[index].quantity = value; console.log(sampleData); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InventoryList, { data: sampleData, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); }

ロットNo	数量
12345
67890