onSubmit不工作

Question

我有以下几个部分。我是根据反应钩子形式的文档来做这个的。此外，我还添加了样式组件。但我发现纽扣有问题。提交按钮不起作用。当我点击它的时候什么都不会发生

​

import styled from 'styled-components';
import { useForm } from "react-hook-form";

export const OrderDetailsForm = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = (data: any) => console.log(data);

    return (
        <OrderDetailsFormContainer>
            <OrderForm onSubmit={handleSubmit(onSubmit)}>
                <OrderDetailsFormContent>
                    <label>First Name</label>
                    <OrderDetailsFormInput  {...register("firstName")} />
                    <label>Last Name</label>
                    <OrderDetailsFormInput  {...register("lastName")} />
                    <label>Phone number</label>
                    <OrderDetailsFormInput  {...register("phoneNumber")} />
                    <label>Email</label>
                    <OrderDetailsFormInput  {...register("emailAddress")} />
                    <OrderDetailsFormHeader>Contact details</OrderDetailsFormHeader>
                </OrderDetailsFormContent>
                <OrderDetailsFormContent>
                    <label>Street</label>
                    <OrderDetailsFormInput {...register("street")} />
                    <label>House number</label>
                    <OrderDetailsFormInput {...register("houseNumber")} />
                    <label>City</label>
                    <OrderDetailsFormInput {...register("city")} />
                    <label>ZIP code</label>
                    <OrderDetailsFormInput {...register("zipCode")} />
                    <OrderDetailsFormHeader>Address</OrderDetailsFormHeader>
                </OrderDetailsFormContent>
                <input type='submit' />
            </OrderForm>
        </OrderDetailsFormContainer>
    )
}

const OrderDetailsFormContainer = styled.main`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
`

const OrderForm = styled.article`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1200px;
`

const OrderDetailsFormContent = styled.section`
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #000;
    box-sizing: border-box;
    margin: 0 25px;
    width: 50%;
    padding: 30px 0 20px 20px;
    position: relative;
`

const OrderDetailsFormInput = styled.input`
    padding: 10px 40px;
    margin: 15px 0;
`

const OrderDetailsFormHeader = styled.h1`
    position: absolute;
    top: -4%;
    left: 4%;
    margin: 0;
    background-color: #fff;
    padding: 0 20px;
    font-size: 20px;
`

const Button = styled.button`
    background-color: black;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
`

很抱歉添加了这个，但是它引发了一个错误--看起来您的文章主要是代码；请添加更多细节。但我不知道我还能给这篇文章加些什么。

​

Answer 1

您的问题是您没有<form/>元素。

您的<OrderForm/>组件正在呈现一个<article/>元素--这没有一个onSubmit支柱，这就是提交不起作用的原因。

在这里将styled.article更改为styled.form：

const OrderForm = styled.form`

Answer 2

const OrderForm = styled.article`

这一行将生成一个文章元素，您知道，文章标记没有onsubmit事件。将此行更改为：

const OrderForm = styled.form

祝好运。