{"id":11367,"date":"2023-01-30T07:00:45","date_gmt":"2023-01-29T22:00:45","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=11367"},"modified":"2023-01-26T17:31:39","modified_gmt":"2023-01-26T08:31:39","slug":"laravel-react-%e7%8b%ac%e8%87%aa%e3%81%ae-confirm-%e3%82%92%e3%82%b7%e3%83%b3%e3%83%97%e3%83%ab%e3%81%ab%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=11367","title":{"rendered":"Laravel + React \u72ec\u81ea\u306e confirm() \u3092\u30b7\u30f3\u30d7\u30eb\u306b\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001Laravel \uff06 React<\/code>\u3092\u4f7f\u3063\u305f\u958b\u767a\u3082\u5c11\u3057\u6163\u308c\u3066\u304d\u305f\u4eca\u65e5\u3053\u306e\u9803\u3067\u3059\u3002<\/p>\n

\u305d\u3057\u3066\u3001\u3053\u308c\u306f\u7686\u3055\u3093\u540c\u3058\u3060\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u4f55\u3067\u3082\u6163\u308c\u3066\u304d\u305f\u3089\u300c\u3067\u304d\u308b\u3060\u3051\u697d\u3057\u3066\u540c\u3058\u52b9\u679c\u3092\u51fa\u3057\u305f\u3044<\/strong>\u300d\u3068\u601d\u3046\u3093\u3058\u3083\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n

\u3064\u307e\u308a\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3084\u5171\u901a\u30b3\u30fc\u30c9\u3092\u3064\u304f\u3063\u3066\u300c\u4f7f\u3044\u307e\u308f\u3057\u300d\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u300c\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8<\/strong>\u300d\u3067\u3059\u306d\u3002<\/p>\n

\u305f\u3060\u3001\u3053\u306e\u9593\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3055\u3048\u3082\u300c\u4f55\u56de\u3082\u4f7f\u3063\u3066\u3081\u3093\u3069\u3046\u2026\ud83d\ude2b<\/strong>\u300d\u3068\u3044\u3046\u5834\u9762\u306b\u906d\u9047\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u308c\u304c\u2026<\/p>\n

\u72ec\u81ea\u306e confirm() \u30e2\u30fc\u30c0\u30eb<\/strong><\/p>\n

\u3067\u3059\u3002<\/p>\n

\u2193\u2193\u2193 \u3053\u3046\u3044\u3046\u3084\u3064\u3067\u3059\u306d\u3002<\/p>\n

\"\"<\/p>\n

\u3068\u3044\u3046\u306e\u3082\u3001\u57fa\u672c\u7684\u306a\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3068\u3057\u3066\u306f\u3053\u306e\u3088\u3046\u306a\u30e2\u30fc\u30c0\u30eb\u3092\u300c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u300d\u3059\u308b\u308f\u3051\u3067\u3059\u304c\u3001\u540c\u3058\u30da\u30fc\u30b8\u3067\u8907\u6570\u5fc5\u8981\u306a\u5834\u5408\u3001\u4f55\u5ea6\u3082\u4f3c\u305f\u30b3\u30fc\u30c9\u66f8\u304b\u306a\u3044\u3068\u3044\u3051\u306a\u304f\u306a\u308a\u30e1\u30f3\u30c9\u30a6\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\uff08useState<\/code>\u3067\uff5b\u8868\u793a\uff0f\u975e\u8868\u793a\uff5d\u90e8\u5206\u3092\u3059\u3079\u3066\u306e\u30e2\u30fc\u30c0\u30eb\u306b\u3064\u304f\u308b\u306e\u306f \ud83d\ude2b \u3068\u306a\u308a\u307e\u3059\uff09<\/p>\n

\u305d\u3053\u3067\u306a\u3093\u3068\u304bJavaScript<\/code>\u306b\u6a19\u6e96\u642d\u8f09\u3055\u308c\u3066\u3044\u308bconfirm()<\/code>\u306e\u3088\u3046\u306b\u4f7f\u3048\u306a\u3044\u3060\u308d\u3046\u304b\ud83e\udd14\u3068\u8003\u3048\u305f\u7d50\u679c\u304c\u4eca\u56de\u306e\u8a18\u4e8b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u2193\u2193\u2193 \u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n

\n
if(confirm('\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f')) {<\/strong>\r\n    \r\n    \/\/ \u3053\u3053\u3067 OK \u3055\u308c\u305f\u6642\u306e\u51e6\u7406<\/strong>\r\n    \r\n}<\/strong><\/pre>\n
\u305c\u3072\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308a\u307e\u3057\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\u3002\ud83d\ude04\u2728<\/p>\n
\"\"\u300c\u30af\u30e9\u30d5\u30c8\u30d3\u30fc\u30eb\u306e\u4fa1\u5024\u3092
\n\u666e\u901a\u306e\u30d3\u30fc\u30eb\u3068\u540c\u3058\u306b
\n\u8003\u3048\u3061\u3083\u30c0\u30e1\u2757\u30bc\u30c3\u30bf\u30a4\ud83c\udf7a\u2728\u300d<\/p>\n
\u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n
\u5192\u982d\u3067\u3082\u66f8\u304d\u307e\u3057\u305f\u304c\u3001JavaScript<\/code>\u306b\u6a19\u6e96\u642d\u8f09\u3055\u308c\u3066\u3044\u308bconfirm()<\/code>\u300c\u306e\u3088\u3046\u306a\u4f7f\u3044\u65b9<\/strong>\u300d\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u305f\u3060\u3001\u7d50\u679c\u3068\u3057\u3066\u306fif()<\/code>\u3067\u306e\u5206\u5c90\u306f\u30d6\u30e9\u30a6\u30b6\u5074\u3092\u3044\u3058\u3089\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3068\u601d\u3044\u307e\u3057\u305f\u306e\u3067\u3001\u6700\u7d42\u7684\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002<\/p>\n
\n
\n
modalRef.current.show(message)<\/strong>\r\n    .then(() => {<\/strong>\r\n\r\n        console.log('OK \u306e\u3068\u304d')<\/strong>\r\n        \r\n    })<\/strong>\r\n    .catch(() => {<\/strong>\r\n\r\n        console.log('\u30ad\u30e3\u30f3\u30bb\u30eb\u306e\u3068\u304d')<\/strong>\r\n        \r\n    });<\/strong><\/pre>\n<\/div>\n<\/div>\n
\u3067\u306f\u3001\u305d\u306e\u7814\u7a76\u7d50\u679c\u3092\u3054\u5831\u544a\u3057\u307e\u3059\u2757<\/p>\n<\/div>\n
\u72ec\u81ea confirm() \u30e2\u30fc\u30c0\u30eb\u30fb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u3044\u304d\u306a\u308a\u3067\u3059\u304c\u3001confirm()<\/code>\u306e\u4ee3\u308f\u308a\u3068\u306a\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8ConfirmationModal<\/code>\u3092\u3064\u304f\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
resources\/js\/Components\/ConfirmationModal.jsx<\/strong><\/p>\n
\n
import {forwardRef, useImperativeHandle, useRef, useState} from \"react\";<\/strong>\r\n\r\nexport default forwardRef((props, ref) => {<\/strong>\r\n\r\n    \/\/ Data<\/strong>\r\n    const [showModal, setShowModal] = useState(false);<\/strong>\r\n    const [message, setMessage] = useState('');<\/strong>\r\n\r\n    \/\/ from Parent<\/strong>\r\n    const callbacksRef = useRef({});<\/strong>\r\n    useImperativeHandle(ref, () => ({<\/strong>\r\n\r\n        show(message) {<\/strong>\r\n\r\n            setShowModal(true);<\/strong>\r\n            setMessage(message);<\/strong>\r\n\r\n            return new Promise((resolve, reject) => {<\/strong>\r\n\r\n                callbacksRef.current = {resolve, reject}; \/\/ \u3053\u3053\u3067 Promise \u306e\u7d50\u679c\u5b9f\u884c\u95a2\u6570\u3092\u4fdd\u5b58\u3057\u3066\u304a\u304f<\/strong>\r\n\r\n            });<\/strong>\r\n\r\n        },<\/strong>\r\n\r\n    }));<\/strong>\r\n\r\n    \/\/ Click<\/strong>\r\n    const handleOkClick = () => {<\/strong>\r\n\r\n        setShowModal(false);<\/strong>\r\n        callbacksRef.current.resolve();<\/strong>\r\n\r\n    };<\/strong>\r\n    const handleCancelClick = () => {<\/strong>\r\n\r\n        setShowModal(false);<\/strong>\r\n        callbacksRef.current.reject();<\/strong>\r\n\r\n    };<\/strong>\r\n\r\n    return (<\/strong>\r\n        <><\/strong>\r\n            {showModal && (<\/strong>\r\n                <div className=\"relative z-10\"><\/strong>\r\n                    <div className=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\"><\/div><\/strong>\r\n                    <div className=\"fixed inset-0 z-10\"><\/strong>\r\n                        <div className=\"flex min-h-full items-end justify-center p-4 text-center items-center\"><\/strong>\r\n                            <div className=\"relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all w-96\"><\/strong>\r\n                                <div className=\"bg-white p-4\"><\/strong>\r\n                                    <div className=\"flex items-start\"><\/strong>\r\n                                        <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100\"><\/strong>\r\n                                            <svg className=\"h-6 w-6 text-blue-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><\/strong>\r\n                                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z\" \/><\/strong>\r\n                                            <\/svg><\/strong>\r\n                                        <\/div><\/strong>\r\n                                        <div className=\"mt-3 mt-0 ml-4 w-full\"><\/strong>\r\n                                            {message}<\/strong>\r\n                                        <\/div><\/strong>\r\n                                    <\/div><\/strong>\r\n                                <\/div><\/strong>\r\n                                <div className=\"bg-gray-200 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6\"><\/strong>\r\n                                    <button<\/strong>\r\n                                        type=\"button\"<\/strong>\r\n                                        className=\"rounded-md border border-gray-300 bg-blue-600 px-4 py-2 text-base font-medium text-white\"<\/strong>\r\n                                        onClick={handleOkClick}><\/strong>\r\n                                        OK<\/strong>\r\n                                    <\/button><\/strong>\r\n                                    <button<\/strong>\r\n                                        type=\"button\"<\/strong>\r\n                                        className=\"rounded-md border border-gray-300 bg-gray-50 px-4 py-2 text-base font-medium text-gray-700 mr-2\"<\/strong>\r\n                                        onClick={handleCancelClick}><\/strong>\r\n                                        \u30ad\u30e3\u30f3\u30bb\u30eb<\/strong>\r\n                                    <\/button><\/strong>\r\n                                <\/div><\/strong>\r\n                            <\/div><\/strong>\r\n                        <\/div><\/strong>\r\n                    <\/div><\/strong>\r\n                <\/div><\/strong>\r\n            )}<\/strong>\r\n        <\/><\/strong>\r\n    );<\/strong>\r\n\r\n});<\/strong><\/pre>\n
\u4eca\u56de\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308b\u3068\u304d\u306b\u521d\u3081\u3066React<\/code>\u306eforwardRef<\/code>\u3001\u00a0useImperativeHandle<\/code>\u3092\u4f7f\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\u3053\u308c\u3089\u3092\u4f7f\u3046\u3068\u3001\u306a\u3093\u3068\u300c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306b\u3042\u308b\u30e1\u30bd\u30c3\u30c9\u3092\uff08\u5916\u5074\u304b\u3089\uff09\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b<\/strong>\u300d\u3093\u3067\u3059\u306d\u3002<\/p>\n
\u3064\u307e\u308a\u3001\u4ee5\u4e0b\u306e\u4f8b\u3067\u3044\u3046\u3068YourComponent<\/code>\u306e\u4e2d\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308bhello()<\/code>\u3092\u30e1\u30a4\u30f3\u30da\u30fc\u30b8\u304b\u3089\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u3010\u30e1\u30a4\u30f3\u30da\u30fc\u30b8\u3011<\/strong><\/p>\n
\n
import ConfirmationModal from \"@\/Components\/YourComponent\";<\/strong>\r\n\r\n\/\/ \u7701\u7565\r\n\r\n\/\/ \u3053\u3053\u3067 YourComponent \u306e hello() \u304c\u5b9f\u884c\u3067\u304d\u308b\ud83d\udc4d<\/strong>\r\n\r\nreturn (\r\n    <>\r\n        <YourComponent><\/YourComponent><\/strong>\r\n    <\/>\r\n);<\/pre>\n
\u3010\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3011<\/strong><\/p>\n
\n
\/\/ \u7701\u7565\r\n\r\nuseImperativeHandle(ref, () => ({<\/strong>\r\n\r\n    hello() {<\/strong>\r\n\r\n        \/\/ \u30e1\u30a4\u30f3\u30da\u30fc\u30b8\u304b\u3089\u5b9f\u884c\u3067\u304d\u308b\ud83d\udc4d<\/strong>\r\n\r\n    },<\/strong>\r\n\r\n}));<\/strong>\r\n\r\n\/\/ \u7701\u7565<\/pre>\n
\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001\u4f55\u5ea6\u3082\uff5b\u8868\u793a\uff0f\u975e\u8868\u793a\uff5d\u5207\u308a\u66ff\u3048\u3092\u30e1\u30a4\u30f3\u30da\u30fc\u30b8\u3067\u3057\u306a\u304f\u3066\u3088\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u305d\u3057\u3066\u3001if()<\/code>\u5206\u5c90\u306e\u4ee3\u308f\u308a\u306b\u4f7f\u3063\u305f\u306e\u304cPromise<\/code>\u3067\u3059\u3002<\/p>\n
Promise<\/code>\u306f\u3001\u3081\u3061\u3083\u304f\u3061\u3083\u7c21\u5358\u306b\u8a00\u3046\u3068\u300c\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u305a\u3089\u3057\u3066\u5206\u5c90\u3067\u304d\u308b<\/strong>\u300d\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n
\u4eca\u56de\u306e\u30b1\u30fc\u30b9\u3067\u8a00\u3046\u3068\u3001\u300cOK \u3082\u3057\u304f\u306f\u3001\u30ad\u30e3\u30f3\u30bb\u30eb\u304c\u6c7a\u5b9a\u3055\u308c\u308b\u306e\u306f\u4f7f\u3063\u3066\u3044\u308b\u30e6\u30fc\u30b6\u30fc\u306e\u30bf\u30a4\u30df\u30f3\u30b0<\/strong>\u300d\u306b\u306a\u308b\u306e\u3067\u3001\u30e2\u30fc\u30c0\u30eb\u304c\u8868\u793a\u3055\u308c\u305f\u3068\u304d\u306bresolve<\/code>\u3068reject<\/code>\u3092\u4fdd\u6301\u3057\u3066\u304a\u3044\u3066\u3001\u5b9f\u969b\u306e\u9078\u629e\u6642\u306b\u6700\u7d42\u6c7a\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u3053\u308c\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5b9f\u88c5\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\uff08axios<\/code>\u3063\u307d\u304f\u3057\u305f\u304b\u3063\u305f\u3093\u3067\u3059\u306d\ud83d\ude04\uff09<\/p>\n
\n
modalRef.current.show(message)<\/strong>\r\n    .then(() => {<\/strong>\r\n\r\n        \/\/ OK \u306e\u3068\u304d<\/strong>\r\n\r\n    })<\/strong>\r\n    .catch(() => {<\/strong>\r\n\r\n        \/\/ \u30ad\u30e3\u30f3\u30bb\u30eb\u306e\u3068\u304d<\/strong>\r\n\r\n    });<\/strong><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u72ec\u81ea\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046<\/h1>\n
\u3067\u306f\u3001\u5148\u307b\u3069\u3064\u304f\u3063\u305fConfirmationModal<\/code>\u3092\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u4eca\u56de\u306f\u540c\u3058\u30da\u30fc\u30b8\u3067\uff13\u3064\u306e\u78ba\u8a8d\u30e2\u30fc\u30c0\u30eb\u304c\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u304c\u3001\u4f7f\u3063\u3066\u3044\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u305f\u3063\u305f\uff11\u3064\u3060\u3051<\/strong>\u3068\u3044\u3046\u70b9\u306b\u6ce8\u76ee\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
resources\/js\/Pages\/ConfirmationModal\/Index.jsx<\/strong><\/p>\n
\n
import ConfirmationModal from \"@\/Components\/ConfirmationModal\";<\/strong>\r\nimport {useRef} from \"react\";<\/strong>\r\n\r\nexport default function Index() {<\/strong>\r\n\r\n    \/\/ Modal<\/strong>\r\n    const modalRef = useRef();<\/strong>\r\n    const handleOpenModalOne = () => {<\/strong>\r\n\r\n        const message = '\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f\uff08\uff11\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09';<\/strong>\r\n        modalRef.current.show(message)<\/strong>\r\n            .then(() => console.log('OK \u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\uff08\uff11\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09'))<\/strong>\r\n            .catch(() => console.log('\u30ad\u30e3\u30f3\u30bb\u30eb\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\uff08\uff11\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09'));<\/strong>\r\n\r\n    };<\/strong>\r\n    const handleOpenModalTwo = () => {<\/strong>\r\n\r\n        const message = '\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f\uff08\uff12\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09';<\/strong>\r\n        modalRef.current.show(message)<\/strong>\r\n            .then(() => console.log('OK \u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\uff08\uff12\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09'))<\/strong>\r\n            .catch(() => console.log('\u30ad\u30e3\u30f3\u30bb\u30eb\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\uff08\uff12\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09'));<\/strong>\r\n\r\n    };<\/strong>\r\n    const handleOpenModalThree = () => {<\/strong>\r\n\r\n        const message = '\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f\uff08\uff13\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09';<\/strong>\r\n        modalRef.current.show(message)<\/strong>\r\n            .then(() => console.log('OK \u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\uff08\uff13\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09'))<\/strong>\r\n            .catch(() => console.log('\u30ad\u30e3\u30f3\u30bb\u30eb\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\uff08\uff13\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09'));<\/strong>\r\n\r\n    };<\/strong>\r\n\r\n    return (<\/strong>\r\n        <div className=\"p-5\"><\/strong>\r\n            <button<\/strong>\r\n                type=\"button\"<\/strong>\r\n                className=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\"<\/strong>\r\n                onClick={handleOpenModalOne}><\/strong>\r\n                \u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\uff08\uff11\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09<\/strong>\r\n            <\/button><\/strong>\r\n            <br \/><\/strong>\r\n            <button<\/strong>\r\n                type=\"button\"<\/strong>\r\n                className=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\"<\/strong>\r\n                onClick={handleOpenModalTwo}><\/strong>\r\n                \u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\uff08\uff12\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09<\/strong>\r\n            <\/button><\/strong>\r\n            <br \/><\/strong>\r\n            <button<\/strong>\r\n                type=\"button\"<\/strong>\r\n                className=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\"<\/strong>\r\n                onClick={handleOpenModalThree}><\/strong>\r\n                \u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\uff08\uff13\u756a\u76ee\u306e\u30dc\u30bf\u30f3\uff09<\/strong>\r\n            <\/button><\/strong>\r\n\r\n            {\/* \u30e2\u30fc\u30c0\u30eb *\/}<\/strong>\r\n            <ConfirmationModal ref={modalRef}><\/ConfirmationModal><\/strong>\r\n        <\/div><\/strong>\r\n    );<\/strong>\r\n\r\n}<\/strong><\/pre>\n<\/div>\n
ConfirmationModal<\/code>\u306e\u4f7f\u3044\u65b9\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
\u307e\u305a\u3001useRef()<\/code>\u304b\u3089\u4f5c\u3063\u305fmodalRef<\/code>\u3092\u7528\u610f\u3057\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306bref<\/code>\u3078\u30bb\u30c3\u30c8\u3059\u308b\u3060\u3051\u3067\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n
\n
const modalRef = useRef();<\/strong>\r\n\r\n\/\/ \u7701\u7565\r\n\r\n<ConfirmationModal ref={modalRef}<\/strong>><\/ConfirmationModal><\/pre>\n
\u3042\u3068\u306f\u3001\u78ba\u8a8d\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3057\u305f\u3044\u3068\u304d\u306b\u3001show()<\/code>\u3092\u547c\u3073\u51fa\u3057\u3001axios<\/code>\u306e\u3088\u3046\u306b\u30c9\u30c3\u30c8\u3067\u3064\u306a\u3044\u3067then<\/code> or catch<\/code>\u3067\u5206\u5c90\u3092\u3057\u307e\u3059\u3002<\/p>\n
\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u5148\u307b\u3069\u306e\u30da\u30fc\u30b8\u304cLaravel<\/code>\u3067\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u30eb\u30fc\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
routes\/web.php<\/strong><\/p>\n
\n
\/\/ \u7701\u7565\r\n\r\nRoute::get('confirmation_modal', fn() => Inertia::render('ConfirmationModal\/Index'));<\/strong><\/pre>\n<\/div>\n<\/div>\n
\u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b<\/h1>\n
\u3067\u306f\u5b9f\u969b\u306b\u30c6\u30b9\u30c8\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u2757<\/p>\n
\u307e\u305a\u306fVite<\/code>\u3092\u8d77\u52d5\u3057\u3066\u3001\u300chttp:\/\/******\/confirmation_modal<\/strong>\u300d\u3078\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u30dc\u30bf\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
\u3067\u306f\u3001\u307e\u305a\u306f\u300c\uff11\u756a\u76ee\u306e\u30dc\u30bf\u30f3<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u3069\u3046\u306a\u308b\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u30e2\u30fc\u30c0\u30eb\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u958b\u3044\u3066\u3001\u307e\u305a\u306f\u300cOK<\/strong>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u3046\u307e\u304f\u3044\u304f\u3067\u3057\u3087\u3046\u304b\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u3046\u307e\u304f\u8868\u793a\u304c\u3067\u307e\u3057\u305f\u3002<\/p>\n
\u3067\u306f\u3001\u6b21\u306b\u300c\uff12\u756a\u76ee\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u30ad\u30e3\u30f3\u30bb\u30eb\u3092\u9078\u629e<\/strong>\u300d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u3059\u308b\u3068\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n
\"\"<\/p>\n
\u306f\u3044\u2757
\n\u3053\u3061\u3089\u3082\u3046\u307e\u304f\u8868\u793a\u304c\u51fa\u307e\u3057\u305f\u3002<\/p>\n
\u3059\u3079\u3066\u6210\u529f\u3067\u3059\ud83d\ude04\u2728<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8\u3092\u7528\u610f\u3057\u307e\u3057\u305f<\/h1>\n
\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u30c7\u30e2\u30da\u30fc\u30b8\u3092\u7528\u610f\u3057\u307e\u3057\u305f\u3002
\n\u305c\u3072\u5b9f\u969b\u306b\u78ba\u304b\u3081\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\ud83d\udcdd \u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/p>\n
\u4f01\u696d\u69d8\u3078\u306e\u3054\u63d0\u6848<\/h1>\n
\u4eca\u56de\u306e\u3088\u3046\u306b\u7279\u306b\u3088\u304f\u5229\u7528\u3059\u308b\u6a5f\u80fd\u306f\u3001\u901a\u5e38\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u3067\u306f\u306a\u3044\u65b9\u6cd5\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u3088\u308a\u7701\u30b3\u30fc\u30c9\u5316\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u4f5c\u696d\u52b9\u7387\u304c\u30a2\u30c3\u30d7\u3057\u307e\u3059\u3002<\/p>\n
\u305d\u3046\u3044\u3063\u305f\u958b\u767a\u3092\u3054\u5e0c\u671b\u3067\u3057\u305f\u3089\u3001\u305c\u3072\u304a\u554f\u3044\u5408\u308f\u305b\u304b\u3089\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\u3002\ud83d\ude04\u2728<\/p>\n
\u304a\u308f\u308a\u306b<\/h1>\n
\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306fconfirm()<\/code>\u3092\u4ee3\u66ff\u3059\u308b\u72ec\u81ea\u30e2\u30fc\u30c0\u30eb\u3092\u3064\u304f\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
\u4eca\u56de\u306fconfirm()<\/code>\u3067\u3057\u305f\u304c\u3001alert()<\/code>\u3067\u3082\u540c\u3058\u3067\u3059\u306e\u3067\u3001\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u3092\u6539\u9020\u3057\u3066\u3054\u81ea\u8eab\u3067\u4f5c\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n
\u3067\u306f\u3067\u306f\u301c\u2757<\/p>\n
\"\"\u300c\u30b0\u30eb\u30e1\u306a\u53cb\u4eba\u5fa1\u7528\u9054
\n\u306e\u304a\u5bff\u53f8\u5c4b\u3055\u3093\u30a6\u30de\u3059\u304e\u3067\u3057\u305f\u2757
\n\uff08\u3057\u304b\u3082\u304a\u5024\u3054\u308d \ud83d\ude04\u2728\uff09\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3055\u3066\u3055\u3066\u3001Laravel \uff06 React\u3092\u4f7f\u3063\u305f\u958b\u767a\u3082\u5c11\u3057\u6163\u308c\u3066\u304d\u305f\u4eca\u65e5\u3053\u306e\u9803\u3067\u3059\u3002 \u305d\u3057\u3066\u3001\u3053\u308c\u306f\u7686\u3055\u3093\u540c\u3058\u3060\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u4f55\u3067\u3082\u6163\u308c\u3066\u304d\u305f\u3089\u300c\u3067\u304d\u308b\u3060\u3051\u697d … <\/p>\n
“Laravel + React \u72ec\u81ea\u306e confirm() \u3092\u30b7\u30f3\u30d7\u30eb\u306b\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":11377,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,3,118,249,248],"tags":[],"class_list":["post-11367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inertia-js","category-laravel","category-react-js","category-tailwind-css","category-vite"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/11367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11367"}],"version-history":[{"count":5,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/11367\/revisions"}],"predecessor-version":[{"id":11378,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/11367\/revisions\/11378"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/11377"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}