React Hook Form - onSubmit 不起作用

Question

我有以下组件。我是根据 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;
`

很抱歉添加这个，但它会抛出一个错误看起来你的 post 主要是代码；请添加更多详细信息。但是我不知道我还能添加什么 post.

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

祝你好运。

React Hook Form - onSubmit 不起作用

React Hook Form - onSubmit does not works

forms

reactjs