카드 클릭에 양식 표시

다음 코드는 사용자가 카드를 클릭할 때 양식을 표시하는 데 사용되었습니다. 표시할 양식의 경로는 useParams 함수를 사용하여 url에서 추출됩니다.

import Form from './components/Form';
import PlainText from './components/plainText';
import TextField from './components/TextField';
import Button from './components/Button';
import Panel from './components/Panel';
import { useState,useEffect } from "react";
import {Link, useParams} from 'react-router-dom';
import { AdaptiveForm } from "@aemforms/af-react-renderer";
export default function DisplayForm()
{
   const [selectedForm, setForm] = useState("");
   const params = useParams();
   const extendMappings =
    {
        'plain-text' : PlainText,
        'text-input' : TextField,
        'button' : Button,
        'form': Form
    };


   const getAFForm = async () =>
    {

        const resp = await fetch(`/adobe/forms/af/${params.formID}`);
        let formJSON = await resp.json();
        console.log("The contact form json is "+formJSON);
        setForm(formJSON.afModelDefinition)
    }

    useEffect( ()=>{
        getAFForm()


    },[]);
    return(
       <div>
           <AdaptiveForm mappings={extendMappings} formJson={selectedForm}/>
        </div>
    )
}

다음 단계

양식 제출 시 감사 메시지 표시

Business.Adobe.com 리소스