ReactHook表單-onSubmit不起作用

我有以下組件。我是根據 react-hook-form 檔案制作的。此外，我添加了樣式組件。但我發現按鈕有問題。提交按鈕不起作用。當我點擊它時沒有任何反應

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;
`

uj5u.com熱心網友回復：

你的問題是你沒有<form/>元素。

您的<OrderForm/>組件正在渲染一個<article/>元素 - 這沒有onSubmit道具，這就是提交不起作用的原因。

在此處將 styled.article 更改為 styled.form：

const OrderForm = styled.form`

uj5u.com熱心網友回復：

const OrderForm = styled.article`

這一行將生成一個文章元素，你知道，文章標簽沒有 onsubmit 事件。將此行更改為：

const OrderForm = styled.form

祝你好運。

標籤：反应 形式

上一篇：如何防止Input元素超過CSS網格列的寬度

下一篇：轉移輸入值