Gatsby와 함께 Netlify 양식을 사용하는 방법
6741 단어 reactnetlifyjavascriptgatsby
어떻게 합니까?
Netlify의 내장 양식 처리를 Gatsby와 함께 사용하는 것은 간단하고 직관적이어야 하지만 슬프게도 그렇게 간단하지 않습니다.
문서에 자세히 나와 있지 않은 몇 가지 추가 구성이 필요합니다. 시작하겠습니다!
일반적으로 양식 태그에 Netlify 속성이나 data-netlify="true"를 추가하기만 하면 나머지는 Netlify가 알아서 처리합니다. Gatsby로 애플리케이션을 만드는 경우에는 그렇지 않습니다.Netlify가 실제로 양식을 볼 수 있도록 하려면 구성 요소가 렌더링될 때 양식 코드가 있을 구성 요소에 대한 참조를 만들어야 합니다. 이와 같이 생성자에서 구성 요소를 참조하는 것만 큼 간단합니다.
constructor(props) {
super(props)
this.ContactForm = React.createRef()
this.state = {
name: "",
email: "",
message: "",
}
}
그 이유는 Gatsby가 런타임 중에 렌더링되지 않고 대신 빌드 시간 동안 HTML 콘텐츠를 생성하기 때문입니다.
이 시점에서 사용자가 양식에 추가할 정보는 개체 형태가 됩니다. POST 요청에서 이 객체를 전달하려면 이 객체를 쿼리 문자열 매개변수로 변환해야 합니다. 제출 함수에서 나중에 사용할 수 있도록 생성자 아래에 아래 스니펫을 추가하세요.
encode = data => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&")
}
이렇게 하면 개체가 변환될 뿐만 아니라 전달하는 키/값 쌍도 인코딩됩니다.
거의 다 왔습니다. 몇 단계만 더 하면 됩니다!
다음 부분은 실제로 양식 제출을 처리하는 함수를 만드는 것입니다. 먼저 위의 몇 단계에서 양식 참조를 저장할 변수를 만듭니다. 그런 다음 이와 같이 HTTP 요청 본문 내부에 생성한 이 변수를 전달합니다.
handleSubmit = event => {
event.preventDefault()
const form = this.ContactForm.current
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: this.encode({
"form-name": form.getAttribute("name"),
...this.state,
}),
})
.then(() => navigate("/"))
.catch(error => alert(error))
this.setState({
name: "",
email: "",
message: "",
})
}
마지막 부분은 양식에 대한 코드를 작성하고 위에서 설명한 대로 양식 태그에 Netlify 속성 또는 data-netlify="true"를 포함하는 것입니다.
HTTP 요청이 방금 생성한 양식을 찾을 수 있도록 form 태그에 name 속성도 포함하는 것을 잊지 마십시오.
그리고 그게 다야!
Netlify에서 사이트 대시보드의 양식 탭에서 이러한 양식에 대한 모든 제출을 찾을 수 있습니다.
이 기사가 도움이 되었기를 바라며, 재미있게 보셨다면 제가 작성한 다른 기사articles도 확인해 보세요!
Reference
이 문제에 관하여(Gatsby와 함께 Netlify 양식을 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/travislramos/how-to-use-netlify-forms-with-gatsby-4c52텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)