不确定为什么我不能将表格提交给Netlify。转到“谢谢”页面，但在fetch上出错。 fetch上的正斜杠是否必须是表单所在的当前页面的路径？也不确定是否重要，但是我的文件类型是.tsx
/** @jsx jsx */
import { jsx } from "theme-ui"
import styled from '@emotion/styled'
import addToMailchimp from 'gatsby-plugin-mailchimp'
import { Parallax } from "react-spring/renderprops-addons.cjs"
import Divider from "@lekoarts/gatsby-theme-cara/src/elements/divider"
import Inner from "@lekoarts/gatsby-theme-cara/src/elements/inner"
import Content from "@lekoarts/gatsby-theme-cara/src/elements/content"
import SVG from "@lekoarts/gatsby-theme-cara/src/components/svg"
import { UpDown, UpDownWide } from "@lekoarts/gatsby-theme-cara/src/styles/animations"
import Layout from "@lekoarts/gatsby-theme-cara/src/components/layout"
import React, { useState, useEffect } from "react"
import { window, exists } from "browser-monads"
import { navigate } from 'gatsby-link'
const Input = styled.input`
background: #242b3c;
border: 0px;
font-size: 1em;
padding:10px;
margin:5px;
color:white;
`
const SubmitButton = styled.input`
border: 0px;
padding: 10px;
background: #3caf7b;
color: white;
font-size: 1em;
font-weight: 800;
`
function encode(data) {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
.join('&')
}
const promo_games = () =>{
const [state, setState] = React.useState({})
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value })
}
const handleSubmit = (e) => {
e.preventDefault()
const form = e.target
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
...state,
}),
})
.then(() => navigate(form.getAttribute('action')))
.catch((error) => alert(error))
}
const {pages, contentOffset, contentFactor} = useWindowWidth();
return (
<Layout>
<Parallax pages={pages} >
<Divider speed={-0.2}
offset={0.1}
factor={1} bg="linear-gradient(to right, SlateBlue 0%, Indigo 100%)"
sx={{ clipPath: `polygon(0 15%, 100% 25%, 100% 85%, 0 75%)` }}/>
<Divider speed={0.2} offset={0.4} factor={1}>
<UpDown>
<SVG icon="triangle" hiddenMobile width={48} stroke color="icon_orange" left="10%" top="20%" />
<SVG icon="hexa" width={48} stroke color="icon_red" left="60%" top="70%" />
<SVG icon="box" width={6} color="icon_darker" left="60%" top="15%" />
</UpDown>
<UpDownWide>
<SVG icon="arrowUp" hiddenMobile width={16} color="icon_blue" left="80%" top="10%" />
<SVG icon="triangle" width={12} stroke color="icon_brightest" left="90%" top="50%" />
<SVG icon="circle" width={16} color="icon_darker" left="70%" top="90%" />
<SVG icon="triangle" width={16} stroke color="icon_darkest" left="30%" top="65%" />
<SVG icon="cross" width={16} stroke color="icon_pink" left="28%" top="15%" />
<SVG icon="circle" width={6} color="icon_darkest" left="75%" top="10%" />
<SVG icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
</UpDownWide>
<SVG icon="circle" hiddenMobile width={24} color="icon_darker" left="5%" top="70%" />
<SVG icon="circle" width={6} color="icon_darkest" left="4%" top="20%" />
<SVG icon="circle" width={12} color="icon_darkest" left="50%" top="60%" />
<SVG icon="upDown" width={8} color="icon_darkest" left="95%" top="90%" />
<SVG icon="upDown" hiddenMobile width={24} color="icon_darker" left="40%" top="80%" />
<SVG icon="triangle" width={8} stroke color="icon_darker" left="25%" top="5%" />
<SVG icon="circle" width={64} color="icon_green" left="95%" top="5%" />
<SVG icon="box" hiddenMobile width={64} color="icon_purple" left="5%" top="90%" />
<SVG icon="box" width={6} color="icon_darkest" left="10%" top="10%" />
<SVG icon="box" width={12} color="icon_darkest" left="40%" top="30%" />
<SVG icon="hexa" width={16} stroke color="icon_darker" left="10%" top="50%" />
<SVG icon="hexa" width={8} stroke color="icon_darker" left="80%" top="70%" />
</Divider>
<Content offset={contentOffset} factor={contentFactor}>
<div style={{ color: `white`}}>
<Inner >
<h1 sx={{
color: "heading",
m: 1,
}}></h1>
<h2>Solution</h2>
</Inner>
<div id="ttm-form">
<h2>Get Game Catalog</h2>
<div>
<form name="promoGames" method="post" action="/thanks/" data-netlify="true" data-netlify-honeypot="bot-field" onSubmit={handleSubmit}>
<input type="hidden" name="form-name" value="promoGames"/>
<Input
type="text"
placeholder="name"
name="FNAME"
required
onChange={handleChange}
/>
<br/>
<Input
type="email"
placeholder="email"
name="EMAIL"
required
onChange={handleChange}
/>
<br />
<Input
type="tel"
placeholder="phone"
name="PHONE"
onChange={handleChange}
/>
<br />
<Input
type="text"
placeholder="company"
name="COMPANY"
onChange={handleChange}
/>
<br />
<br />
<b>Follow up with you?</b>
<ul style={{listStyleType:`none`}}>
<li>
<Input
required
type="radio"
value="Yes"
name="FOLLOWUP"
onChange={handleChange}
/>
<label>Yes</label>
</li>
<li>
<Input
required
type="radio"
value="No"
name="FOLLOWUP"
onChange={handleChange}
/>
<label>No</label>
</li>
</ul>
<SubmitButton type="submit" />
</form>
</div>
</div>
{/* <button style={{color:`white`,background:`linear-gradient(to right, SlateBlue 0%, Indigo 100%)`}}>Go Back </button>*/}
</div>
</Content>
</Parallax>
</Layout>
)
}
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
// default mobile
let breakpoints = {
pages: 2.4,
contentOffset: 0.6,
contentFactor: 1,
width: width
};
if(exists(window)){
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
});
switch (true) {
case (width >= 768):
breakpoints.pages = 1.5;
breakpoints.contentOffset = 0.2;
breakpoints.contentFactor = 0.8;
break;
}
}
return breakpoints;
}
export default promo_games