今勉強がてらReactで蔵書管理のサイトを作っています。
書籍を検索して登録する際、親ページに検索窓があって、ISBN等で検索して得られた書籍の詳細を子コンポーネントに渡して表示しているのですが、すでに登録済の同系列の書籍の一覧(コミックスの何巻かは登録があって、新刊を登録したいなど)は親側で表示しています。
子に渡した書籍情報は新規登録できて、その登録ボタンは子側でもっています。
登録ボタンを押すとDBへの書き込みが行われますが、登録済になったら登録済リストにそれが加わるわけなので、自動的に登録済(親側での表示)をアップデートしたい、要は子のアクションで親を再描画させたいという場面。
調べた限りだと子から親へPropsを渡すことはできないとのことで、親側で関数を用意して、それを子にPropsとして私、子側のなんらかのトリガーで発火させれば親側を発火させることができるようです。
親側でこういうの書きます。
const isRegistClick = (book_name) => {
getRegisteredBooks(book_name)
}
そして子を呼び出すときに渡します。
<Summary
book={book[0]}
isRegistClick={isRegistClick}
></Summary>
ここから子です。
子で受け取って、登録の際に動く関数の中とかに入れてやります。
受け取り
export default function Summary({ book, isRegistClick }) {
子側で発火
const onSubmit = async (): Promise<void> => {
isRegistClick(book_name)
これで、親側の関数が動き、目的を果たせました。