kintone-React自習 6日目「React-kintone連携チュートリアル の作成」入力フォームの作成
Reactのフォーム画面を作成し、kintoneのレコードを表示・更新するチュートリアル を作成する。
チュートリアル 構成
作成するチュートリアルの構成。
1. 入力フォームを作成する
2. kintoneアプリを作成する
3. 入力フォームにkintoneのレコードを表示する
4. 入力フォームからkintoneのレコードを更新する
1. Reactで入力フォームを作成する
HTMLの入力フォームを作成する。
CodeSandboxなどを使ってオンラインでデザインを確認しながら入力フォームを作っていきます。
元のApp.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}編集後のApp.js
import "./styles.css";
import React, { useState, useRef } from "react";
export default function App() {
const [searchString, setSearchString] = useState("");
const [numberOfDeliveryNote, setNumberOfDeliveryNote] = useState("");
const [itemName, setItemName] = useState("");
const [statusOfDelivery, setStatusOfDelivery] = useState("未納品");
const [orderingQuantity, setOrderingQuantity] = useState(0);
const [deliveryDate, setDeliveryDate] = useState("2022-01-01");
const [deliveryQuantity, setDeliveryQuantity] = useState(0);
const [isSearch, setIsSearch] = useState(false);
const deliveryQuantityInput = useRef(null);
const numberOfDeliveryInput = useRef(null);
const confiremButton = useRef(null);
const fetchRecord = (number_of_delivery_note) => {
const record = {
number_of_delivery_note: "12345991",
status_of_delivery: "納品済",
item_name: "BA-2343",
ordering_quantity: "24",
item_number: "77788",
ordering_date: "2022-01-10",
delivery_quantity: "25",
delivery_date: "2022-02-01",
order_backlog: 0
};
return record;
};
const handleSubmit = (event) => {
console.log(event);
event.preventDefault();
confiremButton.current.focus();
setIsSearch(true);
const record = fetchRecord(searchString);
setTimeout(() => {
const {
number_of_delivery_note,
item_name,
status_of_delivery,
ordering_quantity,
delivery_quantity,
delivery_date
} = record;
setNumberOfDeliveryNote(number_of_delivery_note);
setItemName(item_name);
setStatusOfDelivery(status_of_delivery);
setOrderingQuantity(ordering_quantity);
setDeliveryQuantity(delivery_quantity);
setDeliveryDate(delivery_date);
setIsSearch(false);
setSearchString("");
}, 5000);
};
const handleClick = (event) => {
console.log(event);
event.preventDefault();
if (event.target.value === "confirmation") {
console.log(event.target.value);
alert("保存しました");
numberOfDeliveryInput.current.focus();
}
};
return (
<div className="App">
<h1>検収処理</h1>
<h2>{isSearch ? "Start searching..." : ""}</h2>
<div>
<form onSubmit={handleSubmit}>
<span>納品書番号入力：</span>
<input
type="text"
name="search"
value={searchString}
ref={numberOfDeliveryInput}
autoFocus={false}
onChange={(event) => setSearchString(event.target.value)}
/>
<button type="submit" name="search" value="search">
検索
</button>
<div>
<span>納品書番号：</span>
<input type="label" defaultValue={numberOfDeliveryNote} />
</div>
<div>
<label htmlFor="deliveryQuantity">納品数</label>
<input
name="number"
type="number"
ref={deliveryQuantityInput}
value={deliveryQuantity}
onChange={(event) => setDeliveryQuantity(event.target.value)}
/>
<button
type="button"
name="confirmation"
value="confirmation"
ref={confiremButton}
onClick={handleClick}
>
検収確認
</button>
</div>
</form>
<div>納品書番号:{numberOfDeliveryNote}</div>
<div>ステータス:{statusOfDelivery}</div>
<div>品名:{itemName}</div>
<div>発注数:{orderingQuantity}</div>
<div>納品日:{deliveryDate}</div>
</div>
</div>
);
}
参考：
CodeSandbox